React Router mendapatkan `‹NavLink /›` mana yang aktif?

Saya merender beberapa <NavLink /> seperti di bawah ini

<div class="container">
  <NavLink to="/" exact></NavLink>
  <NavLink to="/profile"></NavLink>
  <NavLink to="/message"></NavLink>
</div>

keren bahwa router reaksi akan menambahkan kelas active yang saat ini cocok.

tapi bagaimana cara mengetahui mana yang sedang aktif?

karena saya memiliki beberapa gaya lain untuk disesuaikan berdasarkan ini, seperti ketika di '/' saya ingin memberikan .container 100px padding-kiri, dan ketika di '/profile', saya ingin memberikan .container 200px padding-kiri.


reactjs react-router
person Littlee    schedule 12.04.2019    source sumber

Jawaban (2)


arrow_upward
0
arrow_downward

Anda dapat menggunakan withRouter untuk mendapatkan jalur halaman saat ini, dengan menggunakan nama path Anda dapat mengarsipkan halaman Anda saat ini.

import React from "react";
import { withRouter } from "react-router";

class Location extends React.Component {
  render() {
    const { match, location, history } = this.props;

    return <div>You are now at {location.pathname}</div>;
  }
}

const WithRouter = withRouter(ShowTheLocation);
person mitesh7172    schedule 12.04.2019

arrow_upward
0
arrow_downward

Anda dapat menambahkan activeClassName yang berbeda ke masing-masingnya.

(Lihat https://reacttraining.com/react-router/web/api/NavLink)

Misalnya

<div class="container">
<NavLink to="/" exact></NavLink>
<NavLink to="/profile" activeClassName="matched-profile"></NavLink>
<NavLink to="/message"></NavLink>
</div>

Kemudian gaya wadah seperti ini .container:has(.matched-profile)

person rkouye    schedule 12.04.2019