当 URL 包含多个路径时，React Router 不工作 [英] React Router not working when URL contains multiple paths
问题描述
我使用 webpack-dev-server 进行开发和同样的反应路由器.这是我的wepack配置.
I'm using the webpack-dev-server for development and equally react router. This is my wepack configuration.
const webpack = require('webpack');
const path = require('path');
const common = require('./common.config.js')
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = merge(common, {
devtool: 'source-map',
mode:'development',
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
{
// Adds CSS to the DOM by injecting a `<style>` tag
loader: 'style-loader'
},
{
// Interprets `@import` and `url()` like `import/require()` and will resolve them
loader: 'css-loader'
},
{
// Loader for webpack to process CSS with PostCSS
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('autoprefixer')
];
}
}
},
{
// Loads a SASS/SCSS file and compiles it to CSS
loader: 'sass-loader'
}
]
}
]
},
devServer:{
contentBase: path.join(__dirname, '../dist'),
port: 3000,
proxy:{
'/api': 'http://127.0.0.1:5000',
},
historyApiFallback:true,
overlay: true,
stats: 'normal'
},
watchOptions: {
ignored: /node_modules/
},
plugins: [
new CleanWebpackPlugin(['../dist'], { exclude:['sw.js']}),
new HtmlWebpackPlugin({
title: 'Script App - Dev',
filename: '../dist/index.html',
template:'index_template.html'
}),
new MiniCssExtractPlugin({
filename: 'bundled_styles.css'
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
});
这是我的应用程序的入口点(我在其中定义了路由)
here is the entry point to my app (where I've defined the routes)
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import configureStore from './store/configureStore';
import FirstComponent from './FirstComponent';
import SecondComponent from './SecondComponent';
import App from './App';
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App>
<Switch>
<Route path="/first/:a_code" component={FirstComponent} />
<Route path="/second" component={SecondComponent} />
</Switch>
</App>
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
我正在使用 react-router v4 和 wepack v4.29.
I'm using react-router v4 and wepack v4.29.
我的问题:当我使用 history 道具从我的代码中推送路由时，一切正常，但是当我用路由刷新浏览器时，一切都变成空白.此行为仅在具有多条路径的路由中观察到(/first/:param).
My problem: When I push routes from my code using the history prop, everything works well but when I refresh my browser with the route, Everything goes blank. This behavior is observed only with the route that has multiple paths(/first/:param).
我尝试过的:我从一些 SO 帖子中了解到，我必须将 webpack 配置中的 historyApiFallback 属性设置为 true，我做了，但它仍然没有帮助.this github issue 中的评论之一说historyApiFallbackproxy 配置在 webpack 配置中可用，则 code> 将无法正常工作.
What I've tried: I read from some SO posts that I had to set the historyApiFallback property in my webpack config to true, and I did but it still did not help.
One of the comments in this github issue says that historyApiFallback will not work well if certain proxy configurations are available in the webpack config.
我不想删除这些 proxy 配置，因为我正在对运行在不同端口上的另一台服务器进行 api 调用.
I don't want to remove these proxy configurations because I'm making api calls to another server running on a different port.
谁能帮我解决这个问题?请！
Can anyone help me on this? Please!
推荐答案
我实际上错过了一个 webpack 配置.我必须添加一个 output 配置并将 publicPath 设置为 /.即
I actually missed a webpack configuration. I had to add an output configuration and set the publicPath to /. i.e
output:{
publicPath: '/'
}
我还在 devServer 配置中添加了 publicPath.即
I also added the publicPath in the devServer config. i.e
devServer:{
...
publicPath:'/',
historyApiFallback: true
}
<小时>
更新:
同样确保您的 bundle.js 脚本插入到您的 html 文件中，如下所示:
Equally make sure that your bundle.js script is inserted in your html file like this:
<script src="/bundle.js"></script>
并且不是
<script src="./bundle.js"></script> 或
