使用React Router重新加载页面时出现404错误

Question

我有...

后端

Node.js / express服务器，当对某些路由发出请求时，该服务器提供文件。

前端

反应页面以调用后端请求数据来填充页面。

我在前端使用react-router v4。每当我导航到不在确切路径上的路线并重新加载页面时，都会收到404错误。我了解为什么这行不通；浏览器向由react-router处理的路径发出请求，由于它在服务器上找不到该路由，因此得到404。

我正在寻找解决此问题的方法。

// BrowserRouter imported as Router
<Router>
   <Route exact path='/main' component={Main} />
   <Route path='/sub1' component={SubOne} />
   <Route path='/sub2' component={SubTwo} />
</Router>

当我/main在浏览器中转到时，<Main />将呈现。都说里面<Main />，有链接/sub1和/sub2分别。我点击/sub2。组件和页面内容的渲染不会失败。然后，我偶然或有意刷新页面（例如，组件Sub2将状态提升到Main）。

如何避免在刷新后收到404？如果我使用React-Router，如何在刷新后获得呈现“我”的页面/组件？

Answer 1

大约两个月前，我遇到了与您相同的问题。我对 React 的服务器端渲染知之甚少。我对它的一般概念感到困惑。但是，我不想使用 create-react-app cli。我想使用自己的样板。经过研究，我发现我必须配置 webpack 来处理 404 重新加载后备问题。

这是我当前的 webpack 设置：

请注意，如果您使用的是 v4，请仅注意historyApiFallback: true允许您刷新页面而不会引发 404 错误的 。另外，我忘了提到这需要 webpack-dev-server 才能工作。

const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const HtmlWebPackPlugin = require('html-webpack-plugin');

var browserConfig = {
    devServer: {
        historyApiFallback: true,
        proxy: {
            "/api": "http://localhost:3012"
        }
    },
    entry: ['babel-polyfill', __dirname + '/src/index.js'],
    output: {
        path: path.resolve(__dirname + '/public'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    query: {
                        presets: ['react', 'env', 'stage-0']
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: './public/index.html',
        })
    ]
}

var serverConfig = {
    target: 'node',
    externals: [nodeExternals()],
    entry: __dirname + '/server/main.js',
    output: {
        path: path.resolve(__dirname + '/public'),
        filename: 'server.js',
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    query: {
                        presets: ['react', 'env', 'stage-0']
                    }
                }
            }
        ]
    }
}

module.exports = [browserConfig, serverConfig]

Answer 2

使用“重定向”指令将子路径映射到实际路径

https://reacttraining.com/react-router/web/example/no-match