React Routing：如何使选定的导航项处于活动状态？

Posted 2023-02-22

【中文标题】React Routing：如何使选定的导航项处于活动状态？

【英文标题】：React Routing: How to make selected nav item as Active?

【发布时间】：2020-07-29 16:09:09

【问题描述】：

我正在尝试将选定的导航项设为/显示为活动状态。我检查了有关问题，但我找不到我的代码有什么问题。

我知道通过使用 NavLink，我们可以在选择 Nav-Item 时默认激活。

但现在，我正在尝试使用 Link ，显示一些路径名错误。

TypeError: 无法读取未定义的属性“路径名”

请帮我看看，我的代码出了什么问题。

或者有没有其他方法可以显示活动的导航项？

我尝试了以下代码：

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;

谢谢！！

【问题讨论】：

位置好像是未定义的，你的路由器里面有这个组件吗？

是的。我也会更新有问题的代码。@CarlosSaizOrteu

尝试将SideNav 包裹在withRouter 中，例如：export default withRouter(SideNav)

withRouter 未定义@saeedghotb

然后导入它。 import withRouter from 'react-router-dom'

【参考方案1】：

用 withRouter 包装你的组件应该可以做到。

import  withRouter  from 'react-router-dom'

// your component

export default withRouter(SideNav)

我真的不知道为什么（！）但在某些情况下 withRouter 未能设置活动类，我最终不得不像这样修改路由：

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

【参考方案2】：

位置是历史的一个属性，所以你需要使用 props.history.location 而不是 props.location 另外你没有将历史对象传递给道具，它不会自动出现在那里