Javascript 反应路由：如何使所选导航项目处于活动状态？

我正在尝试将所选导航项目设置为活动状态/显示为活动状态。我检查了有关问题，但找不到代码中的错误

我知道通过使用导航链接，我们可以在选择导航项目时默认激活

但是现在，我尝试使用链接，显示一些路径名错误

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;

从“React”导入React；
从“react router dom”导入{IndexRoute，Link}；
类SideNav扩展了React.Component{
render（）{
const{match，location，history}=this.props；
返回(


仪表板


分析


怎么办？


);
}
}
导出默认侧导航；

路由工作正常

我的路由应用程序/组件代码如下：

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;

从“React”导入React；
进口{
BrowserRouter作为路由器，
路线
转换
重新使用
}从“反应路由器dom”；
从“/components/Navbar/TopNav”导入TopNav；
从“/components/Navbar/SideNav”导入SideNav；
从“/components/Dashboard”导入仪表板；
从“/components/Analytics”导入分析；
从“/components/ToDo”导入ToDo；
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
导出默认应用程序；

---

谢谢

位置是历史的属性，因此需要使用props.history.Location而不是props.Location

---

另外，您没有将历史对象传递给props，它不会自动出现在那里

位置是历史的属性，因此您需要使用props.history.Location而不是props.Location

---

另外，您没有将历史对象传递给道具，它不会自动出现在那里

用withRouter包装您的组件应该这样做

从“react router dom”导入{withRouter}
//您的组件
使用路由器导出默认值（SideNav）

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

}/>

用withRouter包装组件就可以了

从“react router dom”导入{withRouter}
//您的组件
使用路由器导出默认值（SideNav）

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

}/>

看起来位置未定义，路由器中是否有此组件？是的。我还将更新有问题的代码。@CarlosSaizOrteutry将

SideNav

包装在路由器内部，例如：

export default withRouter（SideNav）

withRouter未定义@saeedghotbi导入它<代码>从“react router dom”导入{withRouter}似乎位置未定义，路由器中是否有此组件？是。我还将更新有问题的代码。@CarlosSaizOrteutry将

SideNav

包装在路由器内部，例如：

export default withRouter（SideNav）

withRouter未定义@saeedghotbi导入它<代码>从“react router dom”导入{withRouter}