Question

我正在尝试使用React-Router（v4），我在离开Nav时遇到问题，让Link中的一个成为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>
)

Answer 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>
)

我向主页<NavLink>添加了一个确切的属性，我很确定如果没有它，主页链接将始终处于活动状态，因为/将匹配/about和任何其他页面你有。

Answer 2

我知道我有点晚参加派对，但是我通过设置内联样式来解决这个问题 :focus {任何样式} 我负责大多数样式内联，但是我敢肯定，这也可以在常规样式表中使用。只需使用

:focus

代替

:active

编辑

由于某些原因（大部分是嵌入式软件），我无法使用CSS样式表。因此，我已经开始喜欢内联样式（与观点相反，内联样式在包含8000行代码，跨越37个文件的项目中效果很好，而对性能没有影响）。但不幸的是，:active选择器在以这种方式内联使用时会出现错误，因此我使用了上面的方法。

执行此操作的另一种方法是，因为我知道内联样式有点皱眉，所以用您想要的nav-element样式创建一个css active类，并将状态变量保留为跟踪您当前页面的范围（最好是根组件），并在用户导航到另一页面时对其进行更新。这可以通过用处理更新状态和导航的功能组件包装<Redirect/>或<Link to={}/>来完成，然后在导航组件中，检查渲染的导航元素是否与当前页面匹配，如果有，，将active CSS类添加到该类。

与React-Router的活动链接？

2 个答案: