与 React-Router 的活动链路？

javascript ecmascript-6 reactjs react-router

2022-08-30 05:28:05

我正在尝试 React-Router （v4），我在启动 Nav 时遇到了问题，无法拥有其中一个 .如果我点击任何标签，那么活动的东西就开始工作了。但是，我希望Home在应用程序启动后立即处于活动状态，因为这是在路由中加载的组件。有什么办法可以做到这一点吗？LinkactiveLinkLink/

这是我当前的代码：

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

答案 1

这是 React Router v4 的一个旧的、过时的答案。

<Link>不再具有或属性。在 react-router v4 中，如果你想做条件样式，你必须使用 <NavLink>：activeClassNameactiveStyle

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <NavLink exact 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

答案 2

React Router v6：

来源： Active NavLink Classes with React Router

现在，您可以使用现在接受函数并传递布尔属性的属性，如下所示：classNameisActive

<NavLink
  to="users"
  className={({ isActive }) => (isActive ? 'active' : 'inactive')}
>
  Users
</NavLink>

您也可以添加多个类，因为 v6 已过期：

<NavLink
  to="users"
  className={({ isActive }) =>
    isActive ? 'bg-green-500 font-bold' : 'bg-red-500 font-thin'
  }
>
  Users
</NavLink>

现场演示：使用 React Router 的活动 NavLink 类