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

Question

尝试构建位置为/的启动程序页面，然后构建URL样式为setup/init的初始化页面时，嵌套路由不起作用，不确定原因。React路由器v6。

当我导航到嵌入的url/setup/init时，bundle会更改它的加载位置。它从/bundle.js到/setup/bundle.js，这显然是一个404。

index.tsx：评论中是尝试的所有变体

<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中，但没有成功。我错过了什么？

Answer 1

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

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