React Router跳转后组件不加载问题求助

问题根源 #

1. 路由参数名大小写不匹配：FeatureRoutes 中使用const { accountId, analyticsID } = useParams();，但 App.js 路由定义的参数是:analyticsId（小写d），导致无法正确获取analyticsId参数，拼接的路由路径无效，无法匹配到 AnalyticsView 组件。
2. App.js 路由拼写错误：<AuthRouter eact path="/account/:accountId/Analytics/:analyticsId" 中的eact应为exact，导致该路由配置完全无效。
3. 路由路径拼接方式不合理：FeatureRoutes 中使用字符串拼接生成路由路径，容易因参数错误导致匹配失败，不符合 React Router 最佳实践。
4. 路由匹配顺序问题：带analyticsId的具体路由未优先于通用路由配置，存在被提前匹配的风险。

具体修复步骤 #

1. 修正 App.js 中的路由拼写错误及顺序 #

将拼写错误的eact改为exact，并确保带analyticsId的路由在通用路由之前：

// App.js 中替换对应路由节点
<AuthRouter exact path="/account/:accountId/Analytics/:analyticsId" component={Feature} template={AccountTemplate} title="Feature" role="*" />
<AuthRouter path="/account/:accountId/:path?" component={Feature} template={AccountTemplate} title="Feature" role="*" />

2. 统一 FeatureRoutes 中的参数名并使用动态路由 #

修正参数名大小写，改用动态路由参数而非字符串拼接，避免参数错误：

// FeatureRoutes.js
import React from 'react';
import { Route, Switch, useParams } from "react-router-dom";
import Home from '.';
import ModelsTable from './ModelsNew';
import TemplatesTable from './TemplatesNEW';
import Analytics from './AnalyticsFeature';
import NewModel from './NewModel';
import AnalyticsView from './AnalyticsFeatureView';


const FeatureRoutes = () => {
    // 统一参数名为 analyticsId（和路由定义一致，小写d）
    const { accountId, analyticsId } = useParams();

    return (
        <Switch key="demo">
            {/* 使用动态路由参数，避免字符串拼接错误 */}
            <Route path={`/account/:accountId/Analytics/:analyticsId`}>
                <AnalyticsView />
            </Route>

            <Route path={`/account/:accountId/templates`}>
                <TemplatesTable />
            </Route>

            <Route path={`/account/:accountId/Models`}>
                <ModelsTable />
            </Route>
            <Route path={`/account/:accountId/Model/New`}>
                <NewModel />
            </Route>

            <Route path={`/account/:accountId/Analytics`}>
                <Analytics />
            </Route>

            <Route path={`/account/:accountId/testing`} role="admin">
                <TemplatesTable />
            </Route>
            <Route>
                <Home />
            </Route>
        </Switch>
    )
}

export default FeatureRoutes;

3. 验证跳转路径一致性 #

确认 AnalyticsFeature 中的跳转路径与路由定义一致，当前代码已正确实现，无需修改：

// AnalyticsFeature.js 中的跳转逻辑
onClick={() => history.push('/account/' + userData.currentAccount.id + '/Analytics/' + account.id)}

4. 确认 Feature 组件懒加载逻辑 #

若仍存在组件加载失败问题，可临时替换懒加载为直接导入测试：

// Feature.js 中临时替换懒加载代码
// const FeatureRoutes = require('../../../../features/fireact-demo-feature-main/FeatureRoutes').default;
// components.push(<FeatureRoutes key="demo" />);

验证修复效果 #

完成修改后重启项目：

• 从/account/QQAH7q5Iz1gwOvpJ4WlA/Analytics点击"View Report"跳转时，应正确加载 AnalyticsView 组件。
• 在 AnalyticsView 组件中添加const { analyticsId } = useParams();并打印，确认参数可正常获取。

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