React Router 6：嵌套路由不起作用，可能是 webpack 配置答案

【问题标题】：React Router 6: Nested routes not working, possibly webpack configReact Router 6：嵌套路由不起作用，可能是 webpack 配置
【发布时间】：2022-08-17 02:39:34
【问题描述】：

尝试构建位置为/ 的启动器页面，然后是具有setup/init 的URL 样式的初始页面时，嵌套路由不起作用，不知道为什么。反应路由器 v6。

当我导航到嵌入的 url /setup/init 时，捆绑包会改变它的加载位置。它从/bundle.js 到/setup/bundle.js，显然是404。

index.tsx：在 cmets 中尝试了所有变体

<BrowserRouter>
  <Routes>
    <Route path=\"/\" element={<Launcher />} />
     <Route path=\"/setup/init\" element={<InitContainer />} />
     <Route path=\"*\" element={<h2>Page Not Found</h2>} />
   </Routes>
   {/* <Routes>
     <Route path=\"/\" element={<Launcher />}>
     <Route path=\"setup/init\" element={<InitContainer />} />
     <Route path=\"*\" element={<h2>Page Not Found</h2>} />
   </Routes> */}
   {/* <Routes>
     <Route path=\"/\" element={<Launcher />}>
       <Route path=\"setup\">
         <Route index element={<InitContainer />} />
         <Route path=\"init\" element={<InitContainer />} />
       </Route>
     </Route>
     <Route path=\"*\" element={<h2>Page Not Found</h2>} />
   </Routes> */}
</BrowserRouter>

webpack.config.js：根据其他堆栈答案也尝试了多个 webpack 配置

module.exports = {
  entry: \'./src/client/index.tsx\',
  output: {
    // publicPath: \'/\' <--- This lead to all containers being the launcher container
    path: path.join(__dirname, \'/dist/\'),
    chunkFilename: \'[name].[contenthash].js\',
    filename: \'[name].[contenthash].js\',
    sourceMapFilename: \'[name].[contenthash].js.map\'
  },
  ...
  devServer: {
    port: 3001,
    open: true,
    historyApiFallback: true
  }
  ...
}

我还尝试将Outlet 添加到Launcher 或InitContainer，但没有成功。我错过了什么？

标签： reactjs webpack react-router react-router-dom webpack-5

【解决方案1】：

尝试将其添加到您的 webpack 配置中：

output: {
    [your existing config] ,
    publicPath: "/",
},

【讨论】：