React Router v4中访问根路径时默认高亮指定NavLink的方法

嘿，这个场景我太熟悉了！你现在的问题是：根路径/默认渲染Test组件，但对应的NavLink指向/test，所以访问/时这个链接不会自动高亮。下面给你两种实用的解决方案：

方案一：自定义isActive判断函数（推荐） #

利用NavLink的isActive属性，手动扩展激活条件——当当前路径是/或者/test时，都让这个NavLink处于激活状态。

修改你的NavLink代码如下：

<Router>
  <section>
    <nav>
      <NavLink 
        to="/test" 
        activeClassName="active"
        // 自定义激活判断逻辑
        isActive={(match, location) => {
          // match存在表示当前路径是/test，直接返回true
          // 同时如果当前路径是根路径/，也返回true
          return match || location.pathname === '/';
        }}
      >
        Test
      </NavLink>
      <NavLink to="/test2" activeClassName="active">Test2</NavLink>
    </nav>
    <main>
      {/* 根路径和/test都渲染Test组件 */}
      <Route path={['/', '/test']} component={Test} />
      <Route path="/test2" component={Test2} />
    </main>
  </section>
</Router>

这个方案的好处是不会改变URL，用户访问/时地址栏还是根路径，但Test导航项会正确高亮，同时Test组件也能正常渲染。

方案二：调整路由配置（适合允许URL跳转的场景） #

如果你可以接受用户访问/时自动跳转到/test，那可以添加一个重定向路由：

<Router>
  <section>
    <nav>
      <NavLink to="/test" activeClassName="active" exact>Test</NavLink>
      <NavLink to="/test2" activeClassName="active" exact>Test2</NavLink>
    </nav>
    <main>
      {/* 根路径重定向到/test */}
      <Route exact path="/" render={() => <Redirect to="/test" />} />
      <Route path="/test" component={Test} />
      <Route path="/test2" component={Test2} />
    </main>
  </section>
</Router>

这种方式下，用户访问/会自动跳转到/test，此时NavLink的默认激活逻辑就会生效，自然高亮Test项。但缺点是URL会发生变化，如果你需要保持根路径的URL显示，方案一更合适。

补充说明 #

如果你使用的是React Router v6，activeClassName已经被className的回调函数替代，核心思路还是自定义激活条件：

<NavLink
  to="/test"
  className={({ isActive }) => isActive || window.location.pathname === '/' ? 'active' : ''}
>
  Test
</NavLink>

内容的提问来源于stack exchange，提问作者totalnoob