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

Question

我有...

后端

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

前端

React 页面调用后端请求数据来填充页面。

我在前端使用 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

大约 2 个月前我遇到了同样的问题。我对使用 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]