Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React router, 404 on reload with historyApiFallback true in webpack

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
    }
}
like image 963
Victor Jozwicki Avatar asked May 14 '17 17:05

Victor Jozwicki


2 Answers

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).

like image 196
Przemysław Zalewski Avatar answered Oct 03 '22 08:10

Przemysław Zalewski


Make sure you set the right base tag in your index.html: <base href="/">

like image 34
Nino Filiu Avatar answered Oct 03 '22 07:10

Nino Filiu