React Routing: Как сделать выбранный элемент навигации активным?

Question

Я пытаюсь сделать / показать выбранный элемент навигации как активный. Я проверяю вопросы, но не могу найти, что не так в моем коде.

Я знаю, используя NavLink , мы можем сделать активным по умолчанию, когда выбираем Nav-Item.

Но сейчас я пытаюсь с Link , показывая некоторую ошибку имени пути .

Ошибка типа: невозможно прочитать свойство 'pathname' из неопределенного

Пожалуйста, помогите мне узнать, что не так в моем коде.

Или Есть ли альтернативы для отображения активного элемента навигации?

Я попробовал следующий код:

import React from "react";
import { IndexRoute, Link } from "react-router-dom";

class SideNav extends React.Component {
  render() {
    const { match, location, history } = this.props;
    return (
      <div className="sidebar-wrapper">
        <div className="sidebar-container">
          <ul className="sidebar-menu">
            <li className={location.pathname === "/" && "active"}>
              <Link className="link" to="/">
                <i className="fa fa-cubes icon"></i>
                Dashboard
              </Link>
            </li>
            <li className={location.pathname === "/analytics" && "active"}>
              <Link className="link" to="/analytics">
                <i className="fa fa-pie-chart icon"></i>
                Analytics
              </Link>
            </li>
            <li className={location.pathname === "/todo" && "active"}>
              <Link className="link" to="/todo">
                <i className="fa fa-medkit icon"></i>
                What to do?
              </Link>
            </li>
          </ul>
        </div>
      </div>
    );
  }
}
export default SideNav;

Маршрутизация работает отлично.

Мое приложение маршрутизации / код компонента следующим образом:

import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect
} from "react-router-dom";
import TopNav from "./components/Navbar/TopNav";
import SideNav from "./components/Navbar/SideNav";
import Dashboard from "./components/Dashboard";
import Analytics from "./components/Analytics";
import ToDo from "./components/ToDo";

class App extends React.Component {
  render() {
    return (
      <Router>
        <SideNav />
        <TopNav />
        <Switch>
          <Route exact path="/">
            <Dashboard />
          </Route>
          <Route exact path="/analytics">
            <Analytics />
          </Route>
          <Route exact path="/todo">
            <ToDo />
          </Route>
          <Redirect to="/"></Redirect>
        </Switch>
      </Router>
    );
  }
}
export default App;

Спасибо !!

Answer 1

Завершение вашего компонента с помощью withRouter должно сделать это.

import { withRouter } from 'react-router-dom'

// your component

export default withRouter(SideNav)

Я действительно не знаю почему (!), Но в некоторых случаях withRouter не смог установить активный класс, и мне, наконец, пришлось изменить маршруты как это:

<Switch>
    <Route exact path="/" render={(routeParams)=><Component {...routeParams}/>}/>
</Switch>

Answer 2

Местоположение является свойством истории, поэтому вам нужно использовать props.history.location вместо props.location. Также вы не передали объект истории в props, он там не появится автоматически