react-router6 动态路由（路由相同参数不同），跳转到同一组件，组件不更新？？？

Question

路由配置文件：

import AppLayout from '@/components/app-layout';
import Home from '@/pages/home';
import MMLayout from '@/pages/mm';
import MMList from '@/pages/list';
import PageError from '@/components/error/500';
import NotFound from '@/components/error/404';

import { DocumentFileDescriptionBorder16 } from '@ats-design/icons';

const routes = [
  {
    key: 'layout',
    path: '/',
    element: <AppLayout />,
    children: [
      {
        title: '首页',
        key: 'home',
        path: '/home',
        fullPath: '/home',
        element: <Home />,
      },
      {
        title: '模型管理',
        key: 'mm',
        path: '/mm/:model',
        fullPath: '/mm/sysModel',
        element: <MMLayout />,
        children: [
          {
            title: '模型管理',
            icon: DocumentFileDescriptionBorder16,
            key: 'sysModel',
            path: '/mm/:model',
            fullPath: '/mm/sysModel',
            element: <MMList key="sysModel" />,
          },
          {
            title: '字段管理',
            icon: DocumentFileDescriptionBorder16,
            key: 'sysField',
            path: '/mm/:model',
            fullPath: '/mm/sysField',
            element: <MMList key="sysField" />,
          },
        ],
      },
    ],
  },
  { path: '500', element: <PageError /> },
  { path: '*', element: <NotFound /> },
];
export default routes;

页面点击菜单切换时右侧对应的页面不更新（右侧页面为同一个组件MMList）：

应该如何处理使其更新？？？

Answer 1

你这里的写法并不是 react-router 的原生写法，看起来是某种封装的写法。

所以我看不明白里面的 fullpath 参数有什么用，如果这里的 path 等价于 react-router 的 path 的话，那么你这两个路由使用相同的 path，只会导致永远是第一个 route 完成匹配。

我觉得这里正确的写法不是动态路由，而是

• path: /mm/sysModel
• path: /mm/sysField