刷新后不会显示嵌套的 React 路由

Question

我导航到主路由及其嵌套路由没有问题，但嵌套路由示例中出现问题

/register

，当我尝试刷新页面时，页面显示为空白，控制台上没有错误。主要路线刷新得很好。我目前正在使用express中的端点来为嵌套路由提供html文件，这样我就可以继续构建嵌套路由，但我需要一个持久的解决方案来解决这个问题。我猜这是我的路由问题，或者我可能在后端做错了什么。请帮忙

app.js

import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
import {PublicPage} from './public.jsx'
import {Root} from './root.jsx'
import {Register} from './register.jsx'


let contentNode= document.getElementById('container')

function RoutedApp(){
    return(
            <Router>
                <Routes>
                    <Route path={'/*'} element={<PublicPage/>}>
                        <Route index element={<Root/>}/>
                        <Route path='register' element={<Register/>}/>
                    </Route>
                </Routes>
            </Router>
        )
}

ReactDom.render(<RoutedApp/>, contentNode)

网络包

module.exports = {
    mode: 'development',
    entry: {
        app: './src/app.jsx'
    },
    output: {
        path: path.resolve(__dirname, './static/js'),
        filename: '[name].js',
        chunkFilename: '[name].js'
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                default: false,
                vendor: false,
                vendor: {
                    name: 'vendor',
                    chunks: 'all',
                    test: /node.modules/
                }
            }
        }
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                include: path.resolve(__dirname, 'src'),
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react', '@babel/preset-env']
                    }
                }

            }
        ]
    }
}

我已经尝试过了 在 package.json 中添加

"homepage":"/"

<base href="/">

在index.html中， 将 basename 属性添加到

<Router>

我正在使用没有代理的 webpack 进行构建，以防此信息在某种程度上相关， 我还使用节点/快递服务器提供文件

对于那些对我之前提到的解决方法感兴趣的人，我只是为 Express 服务器上的每个 React 嵌套路由创建了多个端点，例如嵌套

/register

路由，

服务器.js

app.get('/register', (req,res)=>{
    //send html file
    // res.sendFile(path.resolve(__dirname, '...'))
})
app.get('/api/register', (req,res)=>{
    //send a json data
})
app.post('/api/register', (req,res)=>{
    //receive and process client's input
})

Answer 1

我通过将前导斜杠添加到

index.html

中导入的脚本文件中解决了该问题。

所以，我需要改变这一点

<script src="index.js"></script>

对此

<script src="/index.js"></script>

我改变了我的

webpack.config.js

const config = {
  entry: './src/app/index.tsx',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/', // 👈 added this property
  },
  // other configs
};