与React-Router的活动链接？

小编典典

与React-Router的活动链接？

reactjs

我正在尝试React-Router（v4），但从Nav开始让Linkbe
之一出现问题active。如果我单击任何Link标签，则活动的东西开始工作。但是，我希望Home
Link在应用启动后立即启动，因为这是在/路线上加载的组件。有什么办法吗？

这是我当前的代码：

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <Link activeClassName='is-active' to='/'>Home</Link> {/* I want this to start off as active */}
        <Link activeClassName='is-active' to='/about'>About</Link>
      </Nav>

      <Match pattern='/' exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)

阅读 240

2020-07-22

共1个答案

小编典典

<Link>不再具有activeClassName或activeStyle属性。在react-router
v4中，<NavLink>如果要执行条件样式，则必须使用：

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <NavLink exact={true} activeClassName='is-active' to='/'>Home</NavLink>
        <NavLink activeClassName='is-active' to='/about'>About</NavLink>
      </Nav>

      <Match pattern='/' exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)

我在home中添加了一个确切的属性<NavLink>，我很确定没有它，home链接将始终处于活动状态，因为/它将与/about您拥有的任何其他页面匹配。

2020-07-22