React Router v4 routes not working

Question

I am relatively new to reacts and I'm trying to figure out how to get React router to work. I've got a super simple test app that looks like this:

import React from 'react';
import ReactDOM from 'react-dom';

import {BrowserRouter as Router, Route, Switch, IndexRoute, Link} from 'react-router-dom';

const Home = () => <h1><Link to= "/about">Click Me</Link></h1>
const About = () => <h1>About Us</h1>

const Test = () => (
  <Router>
    <Switch>
    <Route path ="/" component = {Home} />
    <Route path ="/about" component = {About} />
    </Switch>
  </Router>
)

ReactDOM.render(<Test />, document.getElementById('app'));

when I run the app the home component loads without any trouble, and when I click the "Click Me" link the url changes to localhost/about, however nothing happens. If I click refresh I get a "Cannot GET /about." Clearly I am doing something wrong but I haven't been able to figure out what. I am also using Webpack.

Are there any messages in the console? It may be an issue with the `About` component and not the router itself. Also, try to put the `About` component on the */* path to see what happens. — gretro, Apr 17 '17 at 18:23
RE: Cannot GET /about: Consider using [create-react-app](https://github.com/facebookincubator/create-react-app). It's facebook blessed and makes the server part of this work out of the box in development, among many other development niceties. Without it you need to manage routing everything to index.html yourself, or use the hash router in react-router. — Alex Guerra, Apr 17 '17 at 18:27

Todd Chaffee · Accepted Answer · 2017-04-17T18:54:03.273

You need to use an exact path for / otherwise it will also match /about.

<Route exact path="/" component={Home} />

As mentioned in the comments, for something this simple I would suggest using Create React App which will make sure your server code and your webpack settings are all correct. Once you use create-react-app you'll just need to use npm to install the react router v4 package, and then put your code above into the App.js file and it should work. There are some small changes to your code to get it to work with create-react-app as can be seen below:

// App.js
import React from 'react';

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home = () => <h1><Link to="/about">Click Me</Link></h1>
const About = () => <h1>About Us</h1>

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
)

export default App;

The quick start instructions from React Router V4 documentation will tell you pretty much the same as I just explained.

Um excuse me but I'm having a similar issue although I've added exact and its still not working — akshay kishore, Nov 09 '18 at 14:21
@akshaykishore You should open a new question and give us the code you are using that will reproduce your problem. — Todd Chaffee, Nov 09 '18 at 14:33
The code is similar except I'm importing the components from an another file. By the way on refreshing the second page component is rendered . — akshay kishore, Nov 09 '18 at 14:35

score 33 · Answer 2 · answered May 20 '17 at 10:12

33

If you're running from localhost you need to add historyApiFallback: true to your webpack.config file

answered May 20 '17 at 10:12

VineFreeman

675
6
12

This was my issue!! Thank you. – Kate Oct 06 '17 at 05:45
14

A bit more info around this would be really helpful! – DanV Oct 26 '17 at 18:31
6

how do you implement this if usign create-react-app? and is it an issue if your stack is deployed to a public server? I get the same issues both local and on my server – Shazam Jun 12 '18 at 03:37
2

This needs to be added to docs, I would have never known this. Been pulling my hair out over this. – Sierra Kilo Jul 24 '18 at 19:29
6

i dont have a webpack.config file. What should i do? – Ashish Kirodian Nov 19 '18 at 11:20
@AshishKirodian if you are using react scripts https://stackoverflow.com/questions/48395804/where-is-create-react-app-webpack-config-and-files – RickWeb Jan 31 '20 at 13:08
Thanks, spent a whole day finding my issue. – Jargal Aug 23 '20 at 04:09
This is the exact solution I was looking for – Changdae Park May 26 '21 at 04:45

score 8 · Answer 3 · edited Aug 02 '20 at 02:28

if Adding exact Don't resolve issue, i have replaced this with

  <Route exact path="/" component={App} />
  <Route path="/login" component={Login} />
  <Route path="/register" component={Register} />

This one

  <Route exact path="/"> <App /> </Route>
  <Route path="/login"> <Login /> </Route>
  <Route path="/register"> <Register /> </Route>

putting component as Route Child solves my page routing i hope it helps someone else too

score 4 · Answer 4 · answered Aug 01 '20 at 15:13

4

You can also solve this issue by keeping the default Route always at the end

<Route path ="/about" component = {About} />

<Route path="/" component={Home} /> // Always at the end

No need to put exact keyword

answered Aug 01 '20 at 15:13

Hrishabh Kumar

41
3

Sidhant kumar · Answer 5 · 2021-02-28T08:08:58.480

While using Switch we need to keep in mind that we specify the routes to be from most specific to most generic. In your case, you have specified "/" before "/about". So every time react is looking for "/about" but going down <Route "/" satisfies for "/about" as well (because "/about" is sub-route of "/") So use: "/about" before "/"

This way you can omit exact as well

import React from 'react';
import ReactDOM from 'react-dom';

import {BrowserRouter as Router, Route, Switch, IndexRoute, Link} from 'react-router-dom';

const Home = () => <h1><Link to= "/about">Click Me</Link></h1>
const About = () => <h1>About Us</h1>

const Test = () => (
  <Router>
    <Switch>
        <Route path ="/about" component = {About} />
        <Route path ="/" component = {Home} />
    </Switch>
  </Router>
)

ReactDOM.render(<Test />, document.getElementById('app'));

score 2 · Answer 6 · answered Feb 08 '19 at 08:27

Maybe it can help someone. I forgot to use the proper history, instead of using the Router I was using the BrowserRouter which ignores the property history={...} to use its own. I was trying to redirect the page with my manually created history but BrowserRouter was using its own one.

score 1 · Answer 7 · answered Nov 11 '20 at 15:07

Here is another way this can happen. It is a stupid mistake but that was the issue in my case.

My problem was an import error. Initially, I had the following import :

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

I decided to move the BrowserRouter component to a higher level but while removing the no longer user Router component, my imports became like this :

import { BrowserRouter as Switch, Route } from 'react-router-dom';

So, effectively, I ended up removing the Switch component and aliasing BrowserRouter as Switch.

It was normal that Switch was no longer working as expected.

React Router v4 routes not working

7 Answers7

Linked