CODEWITHSUNDEEP
reactjsreact-router
JoeTidee
JoeTidee

Reputation: 26044

react-router - cannot GET url

When I navigate to http://localhost:8080 the products page displays, as expected. However, when navigating to http://localhost:8080/basket I get the message in the browser:

Cannot GET /basket

Here is my routes.js:

import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import store from './store/store.js';
import { Provider } from 'react-redux';
import Error404 from './components/Error404.jsx';
import App from './containers/App.jsx';
import ProductsArea from './containers/shop/ProductsArea.jsx';
import BasketArea from './containers/shop/BasketArea.jsx';

const routes = () => (

    <AppContainer>
        <Provider store={store}>
            <Router history={browserHistory}>
                <Route path="/" component={App}>
                    <IndexRoute component={ProductsArea} />
                    <Route path="basket" component={BasketArea} />
                </Route>
                <Route path="*" component={Error404} />
            </Router>
        </Provider>
    </AppContainer>

);

export default routes;

Upvotes: 0

Views: 958

Answers (1)

JoeTidee
JoeTidee

Reputation: 26044

I added historyApiFallback: true to my webpack.config.js file:

module.exports = {
    ...
    devServer: {
        historyApiFallback: true,
        hot: true,
        contentBase: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    },
    ...
}

Upvotes: 2

Related Questions