React Router получает, какой `‹NavLink /›` активен?

Я визуализирую некоторые <NavLink />, как показано ниже.

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

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

но как узнать, какой из них сейчас активен?

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


reactjs react-router
person Littlee    schedule 12.04.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

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

Вы можете добавить к каждому из них другое имя 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)

person rkouye    schedule 12.04.2019