React动态父路由导航问题：跳转时保留父路径

问题根源 #

你当前的导航跳转用了绝对路径（比如to="/signup"），导致直接跳转到网站根路径下的/signup，而非当前父路由（如/sat/）下的子路径。另外路由配置存在错误：<Route element={<SignupPage />} path={'login'} />的路径和LoginPage的重复，应改为path={'signup'}，否则两个组件会同时匹配/login路径。

解决方法 #

1. 使用相对路径（最简单直接）

在NavLink或Link里直接写相对路径，不要加开头的斜杠。React Router会自动基于当前页面的路由层级解析路径：

// LoginPage组件内
<NavLink to="signup">去注册</NavLink>

// SignupPage组件内
<NavLink to="login">去登录</NavLink>

比如当前在/sat/login页面，点击后会自动跳转到/sat/signup，完美保留父路径。

2. 手动拼接父路径（适用于动态处理场景）

如果需要更灵活的路径处理，可通过useLocation获取当前路径，提取父路由部分后拼接子路径：

import { useLocation, NavLink } from 'react-router-dom';

function LoginPage() {
  const { pathname } = useLocation();
  // 拆分路径，提取父路由部分（比如/sat/login => /sat/）
  const parentPath = pathname.substring(0, pathname.lastIndexOf('/') + 1);

  return (
    <div>
      <NavLink to={`${parentPath}signup`}>去注册</NavLink>
    </div>
  );
}

3. 优化路由结构（更规范的嵌套写法）

调整路由配置，用Outlet渲染子路由，让嵌套关系更清晰，同时确保相对路径解析更准确：

import { Routes, Route, Outlet } from 'react-router-dom';

// 父路由组件
function ParentRoute() {
  return <Outlet />; // 用来渲染子路由内容
}

// 路由配置
<Routes>
  {["/sat", "/act", "/gre", "/gmat", "/toefl"].map((path) => (
    <Route key={path} path={path} element={<ParentRoute />}>
      <Route element={<LoginPage />} path="login" />
      <Route element={<SignupPage />} path="signup" />
      <Route element={<ForgetPasswordPage />} path="forget-password" />
      <Route element={<WelcomePage />} path="" />
    </Route>
  ))}
</Routes>

这种写法下，子组件里用相对路径的NavLink会更稳定，同时避免路由重复匹配的问题。

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