我有...
后端
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,如何在刷新后获取“我曾经”呈现的页面/组件?
最佳答案
大约 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]
关于javascript - 使用 React Router 重新加载页面时出现 404 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50283111/