React Router未渲染：嵌套路由结构实现故障排查

我帮你找出了几个关键问题，咱们一步步来修复：

1. 核心错误：误用Router替代Route组件 #

在你的代码里，RouteWithSubRoutes函数和RenderRoutes的兜底路由都用了Router组件，但Router是用来包裹整个路由系统的根容器，单个路由规则必须使用react-router-dom提供的Route组件。这个错误直接导致你的路由规则完全无法被解析，所以路由组件根本不会渲染。

2. 组件调用方式不规范 #

你在App组件里直接用{RenderRoutes(ROUTES)}调用函数组件，虽然语法上能运行，但React推荐用JSX标签<RenderRoutes routes={ROUTES} />来渲染，这样能确保组件的生命周期和上下文被正确处理。

3. 兜底404路由写法错误 #

兜底路由不需要设置path属性，只要放在Switch的最后，就能自动匹配所有未命中的路径，而且同样要使用Route组件。

修正后的完整代码 #

routes.js 文件

import React from "react";
import { Route, Switch } from "react-router-dom"; // 引入Route，而非Router

const ROUTES = [
  { path: "/", key: "ROOT", exact: true, component: () => <h1>Log in</h1> },
  { 
    path: "/app", 
    key: "APP", 
    component: RenderRoutes, 
    routes: [
      { path: "/app", key: "APP_ROOT", exact: true, component: () => <h1>App Index</h1> },
      { path: "/app/page", key: "APP_PAGE", exact: true, component: () => <h1>App Page</h1> },
    ] 
  },
];

export default ROUTES;

function RouteWithSubRoutes(route) {
  // 替换Router为Route组件
  return (
    <Route 
      path={route.path} 
      exact={route.exact} 
      render={props => <route.component {...props} routes={route.routes} />} 
    />
  );
}

export function RenderRoutes({ routes }) { // 用解构方式接收props，更规范
  return (
    <Switch>
      {routes.map((route, i) => {
        return <RouteWithSubRoutes key={route.key} {...route} />;
      })}
      {/* 兜底路由使用Route，不设置path */}
      <Route component={() => <h1>Not Found!</h1>} />
    </Switch>
  );
}

App.js 文件

import { RenderRoutes } from './routes';
import ROUTES from './routes';

function App() {
  return (
    <div style={{ display: "flex", height: "100vh", alignItems: "stretch" }}>
      <div style={{ flex: 0.3, backgroundColor: "#f2f2f2" }}>route menu</div>
      <div>
        {/* 用JSX标签方式渲染组件 */}
        <RenderRoutes routes={ROUTES} />
      </div>
    </div>
  );
}

export default App;

确认index.js的根路由包裹

确保你的根组件被BrowserRouter正确包裹：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

修复后效果 #

• 访问/会显示登录页
• 访问/app会显示App Index
• 访问/app/page会显示App Page
• 访问未定义的路径会显示Not Found
• 侧边的route menu也能正常显示

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