React router, 404 on reload with historyApiFallback true in webpack
react-router, reactjs, webpack
Solution
Change your bundle import in the `index.html` file from relative path `<script src="index_bundle.js"></script>` to absolute `<script src="/index_bundle.js"></script>`. When you GET `services` route your bundle gets loaded relatively to the url path ('/services') and lands nowhere (404 Not Found).
Problem
I'm using react-router-bootstrap and react-router V4, as well as Webpack for dev My problem is that I created paths such as /services/firstService but on reload it gives a 404 I got my index.js ``` ReactDOM.render( <Router> <App /> </Router> , document.getElementById('container')); ``` And then my App.jsx which is my "principal" component ``` 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> ); } } ``` The Navigation component is simply a react-router-bootstrap/react-bootstrap links ``` 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> ); } } ``` The Services component is where I want to display a component {FirstService} and change the path to /services/firstService, same for 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> ); } } ``` Since it's an another component, `this.props` is needed in front of `match.url` (was my first problem) But now, if I reload the page, I get the following message : `'GET localhost:8080/services/index_bundle.js 404 (Not Found)'` My 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 } } ```