React Router：NavLink多路径激活及根路径重定向问题

方案一：让Home的NavLink在两个路径都激活 #

React Router的NavLink支持通过自定义isActive函数覆盖默认的激活判断逻辑。你可以直接在Home对应的NavLink上添加该函数，判断当前路径为"/"或"/home"时返回true：

<div>
  <NavLink
    to="/home"
    // 自定义激活判断逻辑
    isActive={({ currentLocation }) => {
      return currentLocation.pathname === "/" || currentLocation.pathname === "/home";
    }}
    className={({ isActive }) => isActive ? "active-style" : "normal-style"}
  >
    Home
  </NavLink>
  <NavLink to="/projects" className={({ isActive }) => isActive ? "active-style" : "normal-style"}>
    Projects
  </NavLink>
  <NavLink to="/about" className={({ isActive }) => isActive ? "active-style" : "normal-style"}>
    About
  </NavLink>
</div>

这样无论访问example.com还是example.com/home，Home的NavLink都会触发激活样式。

方案二：直接在路由中配置重定向 #

如果不需要保留"/"路径下的独立渲染，只想让访问"/"时自动跳转到"/home"，可以用React Router内置的Navigate组件直接在路由配置中实现重定向，无需自定义带effect的空组件：

修改路由配置如下：

import { Navigate } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <ContentWrapper />,
    errorElement: <p>404</p>,
    children: [
      // 将根路径组件替换为重定向逻辑
      { path: "", element: <Navigate to="/home" replace /> },
      { path: "home", element: <Home /> },
    ]
  }
])

这里的replace属性会让重定向替换当前历史记录条目，用户点击返回按钮时不会回到"/"，更符合常规导航逻辑。

这样用户访问https://example.com时会自动跳转到https://example.com/home，既保留了简洁的入口链接，也维持了/home的路径显示。

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