Блог

Я отображаю некоторые <NavLink /> из них, как показано ниже

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

здорово, что react-router добавит active класс, которому в данный момент соответствует.

но как мне узнать, какой из них активен в данный момент?

потому что у меня есть несколько других стилей для настройки на основе этого, например, когда '/' я хочу указать .container отступ 100 пикселей влево, а когда в ‘/ profile’, я хочу указать .container отступ 200 пикселей влево.

Вы можете использовать withRouter для получения пути к текущей странице, используя pathname, который вы можете подать, который является вашей текущей страницей.

 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);
  

Вы можете добавить к каждому из них другое activeClassName.

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

Например

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

Затем оформите контейнер следующим образом .container:has(.matched-profile)