Reactjs Router Can't GET /page

Question

I am facing an awkward issue with reactjs. it is about routing. When route to any page, it really works great ! only problem, when i reload a page, it fires this Cannot GET /employee here employee is my page name!

I am not getting why i am seeing this.

this is my index.js file:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom'

import App from "../client/components/App";

import { Provider } from 'react-redux'

import { createStore } from 'redux'
import postReducer from '../client/postReducer'

const store = createStore(postReducer)


// if we don't subcribe, yet our crud operation will work
function onStateChange() {
  const state = store.getState();
}

store.subscribe(onStateChange)

ReactDOM.render((
  <BrowserRouter>
      <Provider store={store}>
        <App />
      </Provider>
  </BrowserRouter>
), document.getElementById('app'))

and this is my app.js file

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from '../components/home';
import Contacts from '../components/contact';
import About from '../components/about';
import Employees from '../components/Employees';

class App extends Component {
  render() {
    return (
    <Router>
        <div className="container">
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <ul className="navbar-nav mr-auto">
            <li><Link to={'/'} className="nav-link"> Home </Link></li>
            <li><Link to={'/employee'} className="nav-link">Employee</Link></li>
            <li><Link to={'/contact'} className="nav-link">Contact</Link></li>
            <li><Link to={'/about'} className="nav-link">About</Link></li>
          </ul>
          </nav>
          <hr />
          <Switch>
              <Route exact path='/' component={Home} />
              <Route path='/employee' component={Employees} />
              <Route path='/contact' component={Contacts} />
              <Route path='/about' component={About} />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

and this is my webpack

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  }
});

Can anyone please help me to to fix this error Cannot GET /employee ?

Is it only on production or also on development ? Sounds like your webserver is not configure to redirect 404 to index.html, classic, but should not happen on dev. — sebastienbarbier, Aug 28 '19 at 18:41
you most likely need to configure your .htaccess file in production to handle react router. check this link https://gist.github.com/joellongie/e6f4a3b5fa98c521782619e487aca15a — Jake, Aug 28 '19 at 18:49

sebastienbarbier · Answer 1 · 2019-08-29T07:16:44.253

I believe this is a duplicate with the following : react routing and django url conflict

The issue is probably that you haven't configured your URLs to handle the routes that are defined in React Router. In your Django urls.py you should be using a catch all to match all URLs to your index template
urlpatterns += [
    # match the root
    url(r'^$', base_view),
    # match all other pages
    url(r'^(?:.*)/?$', base_view),
]
The base_view would be a view function that renders a template which includes your bundled app.

However, you should not serve static files using django, it has not been designed for it and will perform not greatly . One quick option is to integrate django whitenoise, but best practice is to use a web server like nginx, or even better a cdn. You can host for free your static files like react bundle app on github pages, which is also nice.

Reactjs Router Can't GET /page

1 Answers1