React Router(v4)Navbar

Question

我正在使用react-router-dom的v4

我需要访问this.props.match我的导航栏组件,以便我可以设置活动类.我正在使用react-materialize.在<NavItem>标签中,我想添加className={this.props.match ? 'active' : ''}.但是,我似乎无法访问该比赛.每次我在控制台中打印时,Props都是一个空对象.

我的Nav.js

<Navbar brand='Fuzic' href="/" className="orange darken-3" right>
  <NavItem className={this.match ? 'active' : ''} href="/devices">Devices</NavItem>
  <NavItem><Link to="/devices">Media</Link></NavItem>
  <NavItem><Link to="/devices">Alarms</Link></NavItem>
  <NavItem><Link to="/devices">Interrupts</Link></NavItem>
  <NavItem><Link to="/auth">Admin</Link></NavItem>
</Navbar>

我的App.js

<BrowserRouter>
  <div>
    <Nav/>
    <div className="container">
      <Switch>
        <PropsRoute exact path="/" component={Auth}/>
        <PropsRoute exact path="/devices" component={Devices} devices={this.state.devices} setCurrentDevice={this.setCurrentDevice} />
        <PropsRoute path="/devices/:deviceId" component={Detail} currentDevice={this.state.currentDevice} />
        <PropsRoute path="/auth" component={Auth}/>
        <PropsRoute component={NotFound}/>
      </Switch>
    </div>
  </div> 
</BrowserRouter>

helper.js - 结合我传递的道具和来自react-router的道具

// Exerp From:  https://github.com/ReactTraining/react-router/issues/4105
export const renderMergedProps = (component, ...rest) => {
  const finalProps = Object.assign({}, ...rest);
  return (
    React.createElement(component, finalProps)
  );
}

export const PropsRoute = ({ component, ...rest }) => {
  return (
    <Route {...rest} render={routeProps => {
      return renderMergedProps(component, routeProps, rest);
    }}/>
  );
}

大多数在线文档和文章适用于v2和3.v4的文档没有详细说明如何处理这个问题.许多人为他们的应用程序嵌套了一条路线.但是,当我这样做时,我在控制台中得到一个堆栈溢出框架打印.

我如何解决这个问题,以便获得匹配的访问权限？

Answer 1

在您的导航组件上,尝试使用反应路由器<NavLink>而不是<Link>.

<NavLink>是一个特殊版本<Link>,它将在与当前URL匹配时为渲染元素添加样式属性.

<NavLink>具有activeClassName和activeStyle属性,您可以使用它们将样式应用于活动导航项.

例如,基本导航将是这样的:

<nav>
    <NavLink activeStyle={{color: 'red'}} to="/foo">Foo</NavLink>
    <NavLink activeStyle={{color: 'red'}} to="/bar">Bar Group</NavLink>
    <NavLink activeStyle={{color: 'red'}} to="/another-foo">Another Foo</NavLink>
    <NavLink activeStyle={{color: 'red'}} to="/another-bar">Another Bar</NavLink>
</nav>

其中activeStyle表示在元素处于活动状态时应用于该元素的样式.

并通过activeClassName在同一个示例下面:

<nav>
    <NavLink activeClassName="selected" to="/foo">Foo</NavLink>
    <NavLink activeClassName="selected" to="/bar">Bar Group</NavLink>
    <NavLink activeClassName="selected" to="/another-foo">Another Foo</NavLink>
    <NavLink activeClassName="selected" to="/another-bar">Another Bar</NavLink>
</nav>

activeClassName是在元素处于活动状态时赋予它的类.对于这个例子,我选择它selected.默认情况下,react-router v4给定类为活动状态active.

了解有关<NavLink>react-router v4 文档的更多信息