React Router получить который``активен?

Question

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

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

круто, что реагирующий маршрутизатор добавит класс active, которому в настоящее время соответствует.

но как я знаюкакой из них в настоящее время активен?

, потому что у меня есть некоторые другие стили для настройки на основе этого, например, когда в '/' я хочу дать .container 100px padding-left и когда в '/ profile',Я хочу дать .container 200px padding-left.

Answer 1

Вы можете использовать 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);

Answer 2

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