React Router多级路由配置与导航异常问题解决

正确路由配置 #

嵌套路由需使用相对路径，且父路由组件必须添加<Outlet />用于渲染子路由内容：

// App.js
import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';
import RequaireAuth from './RequaireAuth';
import Dlist from './Dlist';
import PrevSingle from './PrevSingle';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="drivers" element={<RequaireAuth><Outlet /></RequaireAuth>}>
          {/* 匹配路径：/drivers */}
          <Route index element={<Dlist />} />
          {/* 匹配路径：/drivers/:driverId */}
          <Route path=":driverId" element={<PrevSingle />}>
            {/* 匹配路径：/drivers/:driverId/:orderNumber */}
            <Route path=":orderNumber" element={<PrevSingle />} />
          </Route>
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

导航逻辑修正 #

导航路径拼接逻辑正确，建议用模板字符串提升可读性：

// Prev.jsx
import { useNavigate } from 'react-router-dom';

const Prev = () => {
  const navigate = useNavigate();
  // 假设driverId已在组件中定义
  const handleClick = (row) => {
    const orderNumber = row.orderNumber.replace(/\D/g, '');
    navigate(`/drivers/${driverId}/${orderNumber}`);
  };

  return (
    {/* 你的组件内容 */}
  );
};

export default Prev;

组件中获取路由参数 #

在PrevSingle组件中，通过useParams获取动态参数：

// PrevSingle.jsx
import { useParams } from 'react-router-dom';

const PrevSingle = () => {
  const { driverId, orderNumber } = useParams();
  
  return (
    <div>
      <p>司机ID：{driverId}</p>
      {orderNumber && <p>订单号：{orderNumber}</p>}
    </div>
  );
};

export default PrevSingle;

错误原因解析 #

1. 初始路由配置错误：
   二级路由使用了固定字符串driverId而非动态参数:driverId，且路径格式不匹配导航目标。
2. 绝对路径嵌套错误：
   嵌套路由中使用绝对路径"/:orderNumber"违反规则，React Router要求嵌套绝对路径必须包含所有父路由路径，嵌套场景优先用相对路径。
3. 缺失Outlet组件：
   父路由组件未添加<Outlet />，子路由内容无法渲染，导致导航后页面无变化。

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