React Router重渲染时如何动态更新文档标题修复路由报错

报错和功能失效来自三个核心错误：

• React Router的动态路由参数官方语法是:参数名，你写的(orderAmount)不属于合法路由语法，加上初始状态下orderAmount是空字符串，实际注册到路由表的路径就是/()orders，跳转时自然匹配不到对应规则，直接抛出路由不匹配的警告。
• 实现思路走偏：更新文档标题document.title完全不需要动态修改路由路径，为了同步个标题数值去动态改路由配置、拼接URL，属于多余操作，还会引发路由匹配混乱、跳转异常的连锁问题。
• 附加隐藏bug：订单页的useEffect没有传入依赖数组，会触发「渲染→执行effect更新状态→重渲染→再执行effect」的死循环；另外代码里BrowserRouter的导入来源错误，也没有在外层包裹路由容器，路由本身就无法正常运行。

1. 修正路由配置，使用固定路径 #

不要把订单数量拼到路由定义里，订单页用固定路由即可：
修改app.jsx：

// 修正BrowserRouter导入，注意要在应用外层包裹
import { BrowserRouter, useRoutes } from 'react-router-dom';
import './styles/styles.scss'
import HomePage from "./pages/home";
import OrdersPage from "./pages/orders";
import { useState } from 'react';
import { AppContext } from './context/Context';

const RouteConfig = () => {
  const [orderAmount, setOrderAmount] = useState(0) // 初始值给数字类型，不要空字符串
  const Routes = useRoutes([
      {path: "/", element: <HomePage/>},
      {path: "/orders", element: <OrdersPage/>} // 固定订单页路由
  ])
  return (
    <AppContext.Provider value={{orderAmount, setOrderAmount}}>
      {Routes}
    </AppContext.Provider>
  )
}

const App = () => {
  // 外层包裹路由容器
  return (
    <BrowserRouter>
      <RouteConfig />
    </BrowserRouter>
  )
}

export default App;

同步修改首页home.jsx的跳转地址，指向固定的订单页路径：

// 去掉原来拼orderAmount的跳转逻辑
<Link to="/orders">
    <AntButton name="Orders" type="primary"/>
</Link>

2. 直接在订单页同步更新文档标题 #

不需要绕路由，订单数量计算完成后直接修改document.title即可，同时给useEffect加上依赖数组避免死循环：
修改orders.jsx中的effect逻辑：

const orders = useMemo(() => {
    if (filteringStatus) {
      return ordersToDisplay.filter((i) => i.orderStatus === filteringStatus);
    }
    return ordersToDisplay;
}, [filteringStatus]);

useEffect(() => {
    const currentCount = orders.length
    setOrderAmount(currentCount)
    // 直接更新文档标题，格式可以按需调整
    document.title = `订单管理（${currentCount}条）`
// 只有订单列表长度变化、setOrderAmount引用变化时才执行，避免死循环
}, [orders.length, setOrderAmount])

如果后续需要把筛选状态同步到URL方便用户分享筛选后的页面，可以用React Router的可选参数语法定义路由，比如/orders/:filterStatus?，但路由规则本身是固定写死的，不要用组件状态动态拼接路由path。

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