与反应路由器的主动链接？

Question

我正在尝试React-路由器（v4），我有问题启动的Nav有一个链接的活动。如果我单击任何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

React路由器留档有助于：https://reactrouter.com/web/api/NavLink您可以指定确切的链接，也样式活动链接

Answer 2

反应路由器v6：

来源：带React路由器的活动NavLink类

现在，您可以使用class Name属性，该属性现在接受一个函数并传递一个isActive布尔属性，如下所示：

<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路由器的活动NavLink类

Answer 3

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

我在家里添加了一个精确的属性