根据路由反应路由器导航栏

Posted

技术标签:

【中文标题】根据路由反应路由器导航栏【英文标题】:React Router Navbar depending on route 【发布时间】:2020-10-27 10:04:30 【问题描述】:

我正在尝试根据我的 React 应用程序中的当前路径设置导航栏链接的样式,如果路径是 /create 或 /add 它应该改变它的样式。这是我的标题组件中到目前为止的内容:

          <div
            id="createLink"
            className=this.state.createClassName
            onClick=() => this.handleModalToggle()
          >
            CREATE
          </div>

  handleActiveLink= () => 
    let path = this.props.location.pathname
     if (path === "/add" | path === "/create") 
       this.setState(createClassName: "nav-link-active")
      else 
       this.setState( createClassName: "nav-link" )
     
  ;

  componentDidMount() 
    this.handleActiveLink()
  

这有效,但只有在我刷新页面后才有意义,但这不是我想要的。所以我正在寻找一种在渲染之前更改 className 并首先获取路径的方法(我正在使用 react-router-dom 中的 withRouter)

【问题讨论】:

react-router-dom 内置了将活动类设置为活动路由的功能。请改用NavLink。 github.com/ReactTraining/react-router/blob/master/packages/… reactrouter.com/web/api/NavLink 并添加一些逻辑来设置activeClassName。不要重新发明***并添加更多。 我避免使用 NavLink,因为它需要一个重定向路径。在我的情况下,我只想打开一个模式来选择一些选项(创建或添加一个条目),然后将用户重定向到 /create 或 /add 在这种情况下,我建议不要将此类瞬态数据存储在 state 中,它可以简单地从 props 派生并设置为 className渲染函数。 【参考方案1】:

问题似乎是您只在组件安装时检查路径,而不是在更新时检查路径。您还应该签入componentDidUpdate

handleActiveLink= () => 
  let path = this.props.location.pathname;
  if (path === "/add" || path === "/create") 
    this.setState(createClassName: "nav-link-active");
   else 
    this.setState( createClassName: "nav-link" );
  
;

componentDidMount() 
  this.handleActiveLink();


componentDidUpdate() 
  this.handleActiveLink();

在这种情况下,我建议 不要 将此类瞬态数据存储在 state 中,只需从 props 派生它并在渲染函数中设置为 className(或任何地方)你渲染它)。这样,它会计算每次渲染何时 UI 将被某些东西更新并且将始终是最新的(即您无需担心生命​​周期函数)。

render() 
  const  location:  pathname   = this.props;
  const linkClass = ["/add", "/create"].includes(pathname)
    ? "nav-link-active"
    : "nav-link";

  ...

  <div
    id="createLink"
    className=linkClass
    onClick=() => this.handleModalToggle()
  >
    CREATE
  </div>
  ...

【讨论】:

像魅力一样工作。还有非常优雅的代码,非常感谢!

以上是关于根据路由反应路由器导航栏的主要内容,如果未能解决你的问题,请参考以下文章

在 ReactJS 中更改其他路由上的导航栏背景颜色

elementUI的导航栏怎么根据路由默认选中相关项

使用带反应路由器的锚点

为啥不根据路由渲染组件?

反应路由器 - 受保护的路由组件不起作用

反应路由器/反应查询不会取消/发出导航请求 - 反应/打字稿