React应用配置静态与动态路由后访问静态路由跳转异常问题

问题由两个错误共同导致：

1. Switch 组件的路径匹配逻辑仅对其直接子元素的Route组件生效，你在Switch内部嵌套了一层div，导致Switch的匹配规则完全失效，所有路由都会触发前缀匹配校验。
2. 静态路由 /settings/home 未加 exact 修饰，且路径结构正好符合动态路由 /:object/:id 的匹配规则：settings 会被识别为 object 参数，home 会被识别为 id 参数，所以访问设置页时会优先触发DetailPage的渲染。

按照以下步骤调整代码即可：

• 移除Switch内部嵌套的div标签，让所有Route组件成为Switch的直接子元素
• 给静态路由 /settings/home 添加 exact 属性，避免前缀匹配误触发
• 调整路由排列顺序：匹配规则越精确的路由越靠前放置，顺序为「静态路由 > 规则明确的动态列表路由 > 规则宽泛的动态详情路由」
• 补充动态路由的遍历逻辑，从你提供的JSON文件中循环生成对应的列表页Route

修复后的完整代码示例：

import React from 'react';
// 替换为你的动态路由JSON文件实际路径
import dynamicRoutes from './routes.json';

function App() {
    return (
        <div className="Grid-Container">
           <Router>
            <Switch>
                {/* 静态设置页路由，加exact，放在最前 */}
                <Route
                    path='/settings/home'
                    component={Settings}
                    key={'Settings'}
                    exact
                />
                {/* 遍历动态路由JSON生成列表页路由 */}
                {dynamicRoutes.map(page => (
                    <Route
                        path={page.Link}
                        component={objectPage}
                        key={`${page.Text}-List`}
                        exact
                    />
                ))}
                {/* 最宽泛的详情路由放在最后 */}
                <Route
                    path={`/:object/:id`}
                    component={DetailPage}
                    key={`Detail-Route`}
                    exact
                />
            </Switch>
          </Router>
        </div>
    );
}

export default App;

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