反应路由器，在 webpack 中使用 historyApiFallback true 重新加载 404
Posted
技术标签:
【中文标题】反应路由器，在 webpack 中使用 historyApiFallback true 重新加载 404【英文标题】：React router, 404 on reload with historyApiFallback true in webpack 【发布时间】：2017-10-13 11:40:33 【问题描述】：我正在使用 react-router-bootstrap 和 react-router V4，以及用于开发的 Webpack
我的问题是我创建了 /services/firstService 之类的路径，但在重新加载时它给出了 404
我得到了我的 index.js
ReactDOM.render(
<Router>
<App />
</Router>
, document.getElementById('container'));
然后是我的 App.jsx，这是我的“主要”组件
export default class App extends React.Component
render()
return (
<div>
<Navigation/>
<div className="content">
<Route exact=true path="/" component=Home/>
<Route exact=true path="/home" component=Home/>
<Route path="/services" component=Services/>
<Route path="/infos" component=Infos/>
<Route path="/contacts" component=Contacts/>
<Route path="/basic" component=BasicComponent/>
</div>
</div>
);
导航组件只是一个 react-router-bootstrap/react-bootstrap 链接
export default class Navigation extends React.Component
render()
return (
<Navbar>
<Nav>
<LinkContainer to="/home">
<NavItem eventKey=1>Home</NavItem>
</LinkContainer>
<LinkContainer to="/services">
<NavItem eventKey=2>Services</NavItem>
</LinkContainer>
<LinkContainer to="/infos">
<NavItem eventKey=3>Infos</NavItem>
</LinkContainer>
<LinkContainer to="/contacts">
<NavItem eventKey=4>Contacts</NavItem>
</LinkContainer>
</Nav>
</Navbar>
);
Services 组件是我想要显示组件 FirstService 并将路径更改为 /services/firstService 的地方，对于 secondService 也是如此
export default class Services extends React.Component
constructor(props)
super( props );
render()
return (
<div>
ul/li
<Link to=`$this.props.match.url/firstService`>
firstService
</Link>
<Link to=`$this.props.match.url/firstService`>
firstService
</Link>
ul/li
<Route path=`$this.props.match.url/firstService` component=FirstService/>
<Route path=`$this.props.match.url/secondService` component=SecondService/>
</div>
);
由于它是另一个组件，this.props 需要在 match.url 前面（这是我的第一个问题）
但是现在，如果我重新加载页面，我会收到以下消息：
'GET localhost:8080/services/index_bundle.js 404 (Not Found)'
我的 webpack.config.js
/*
./webpack.config.js
*/
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin(
template: './src/index.html'
)
module.exports =
entry: './src',
output:
path: __dirname + "/builds",
filename: 'index_bundle.js'
,
module:
loaders: [
test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ ,
test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ ,
test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader']
]
,
plugins: [HtmlWebpackPluginConfig],
devServer:
historyApiFallback: true
【问题讨论】：
【参考方案1】：将 index.html 文件中的包导入从相对路径 <script src="index_bundle.js"></script> 更改为绝对路径 <script src="/index_bundle.js"></script>。当你 GET services 路由时，你的包相对于 url 路径（'/services'）被加载并且无处可寻（404 Not Found）。
【讨论】：
我刚刚注意到一些东西，似乎有东西已经将脚本注入到我的 index.html 中，我现在有两个脚本：<body> <div id="container"/> <script src="/index_bundle.js"></script> <script type="text/javascript" src="index_bundle.js"></script></body> 所以我仍然有一个错误 404 但因为那个是在绝对路径中它可以工作......我不知道脚本是在哪里注入的，所以我无法将其修改为绝对路径
我用那个确切的链接弄明白了，我的小应用程序已经完成，我只需要学习如何在网络上部署 ReactJS 应用程序。【参考方案2】：
确保在index.html 中设置正确的base tag：<base href="/">
【讨论】：
以上是关于反应路由器，在 webpack 中使用 historyApiFallback true 重新加载 404的主要内容，如果未能解决你的问题，请参考以下文章
如何使用反应路由器 dom v4 配置 webpack 开发服务器？
React slingshot - 使用反应路由器子路由时，Webpack 热中间件在 hot-update.json 上返回 404