React Router v6路由组件不渲染：登录后管理面板路由失效

问题根源 #

1. 父路由的exact限制：index.js中给/app路由添加了exact属性，这会导致只有当浏览器地址完全等于/app时，才会渲染App组件。访问/app/customers这类子路径时，父路由无法匹配，App组件不加载，内部子路由自然无法生效。
2. 子路由使用绝对路径：App.js里的子路由（如/customers）采用绝对路径，它们会直接匹配根路径下的对应地址，但根路由（index.js的Routes）未定义这些路径，因此访问时找不到对应组件。

修复步骤 #

步骤1：移除父路由的exact属性 #

修改index.js中的/app路由，去掉exact限制：

<Route path="/app" element={<App/>} />

这样所有以/app开头的路径都会匹配到App组件，内部子路由才能正常工作。

步骤2：将子路由改为相对路径 #

修改App.js里的子路由，把绝对路径改为相对路径（去掉开头的/）：

<Routes>
    <Route path="" exact element={<Dashboard colorMode={layoutColorMode} location={location} />} />
    <Route path="customers" element={<Contacts/>} />
    <Route path="customers/new" element={<AddContact/>} />
    <Route path="customers/:id" element={<CustomerCard/>} />
</Routes>

如果想将首页路径设为/app/dashboard，也可以调整为：

<Routes>
    <Route path="dashboard" exact element={<Dashboard colorMode={layoutColorMode} location={location} />} />
    <Route path="customers" element={<Contacts/>} />
    <Route path="customers/new" element={<AddContact/>} />
    <Route path="customers/:id" element={<CustomerCard/>} />
</Routes>

同时确保导航菜单的跳转路径正确，比如跳转到/app/customers而非/customers。

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