我正在使用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
}
}
答案 0 :(得分:1)
将index.html
文件中的捆绑导入从相对路径<script src="index_bundle.js"></script>
更改为绝对<script src="/index_bundle.js"></script>
。当你获得services
路线时,你的捆绑包相对于网址路径(&#39; / services&#39;)被加载并且无处可去(404 Not Found)。
答案 1 :(得分:1)
确保在index.html
中设置正确的base tag:<base href="/">