React Router redirects all requests to "/"

Question

Whenever I try to browse path like "/about" which in browser would be like this : "http://localhost:3000/#/about" . I got my home page. React Router doesn't direct me to wanted path.

I use React Router v4.

This is my App.jsx file :

var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router-dom').BrowserRouter;
var {Route,Link, hashHistory, Switch} = require('react-router-dom');

var Main = require('Main');
var Weather = require('Weather');
var About = require('About');
var Examples = require('Examples');



 ReactDOM.render(
   <Router>
     <div>

          <Route exact path="/about" component={About} />
          <Route exact path="/examples" component={Examples} />
          <Route exact path= "/" component={Main} />
    </div>
   </Router>
        ,document.getElementById('app')
         );

These 2 solutions didn't work: React Router Default Route Redirect to /home

React Router always redirect me to a different url

And another question: Which version of React Router is better to use? I think v3 is better than v4,due to simplicity.

Try change Router by HashRouter – Henrique Oecksler Bertoldi Jul 14 '17 at 14:41 — Henrique Oecksler Bertoldi, Jul 14 '17 at 14:41
@HenriqueOeckslerBertoldi Thanks a lot. It works. – Behdad Jul 14 '17 at 14:50 — Behdad, Jul 14 '17 at 14:50
I properly answered below :D. Just for the case haha. – Henrique Oecksler Bertoldi Jul 14 '17 at 14:53 — Henrique Oecksler Bertoldi, Jul 14 '17 at 14:53

score 2 · Accepted Answer · answered Jul 14 '17 at 14:52

You are using a Hash router (as I see in your url). So you have to use HashRouter instead of Router.

    var React = require('react');
    var ReactDOM = require('react-dom');
    var {HashRouter, Route,Link, hashHistory, Switch} = require('react-router-dom');

    var Main = require('Main');
    var Weather = require('Weather');
    var About = require('About');
    var Examples = require('Examples');



    ReactDOM.render(
       <HashRouter>
         <div>
            <Route exact path="/about" component={About} />
            <Route exact path="/examples" component={Examples} />
            <Route exact path= "/" component={Main} />
        </div>
       </HashRouter>
    ,document.getElementById('app')
);

I changed answer flag to your answer due to more completed answer and also faster answer due to your comment on my question. — Behdad, Jul 15 '17 at 08:37

score 1 · Answer 2 · answered Jul 14 '17 at 14:43

1

Wrap you routes with <Switch> component.

answered Jul 14 '17 at 14:43

Ivan Burnaev

2,690
18
27

score 1 · Answer 3 · answered Jul 14 '17 at 14:48

1

Right now, it appears you are using the wrong router. You want to use the HashRouter but you are using the BrowserRouter. Try updating your imports like so.

var React = require('react');
var ReactDOM = require('react-dom');
var { Route, Link, HashRouter as Router, Switch } = require('react-router-dom');

answered Jul 14 '17 at 14:48

searsaw

3,492
24
31

Thank you, it works. I am so new to version 4 of it. What's the different between `HashRouter` vs `BrowserRouter` ? – Behdad Jul 14 '17 at 14:51
`HashRouter` navigates by the pre-HTML5 navigation API. It puts the hash in the URL and navigates based on what's after the hash. `BrowserRouter` uses the HTML5 API and `push`es new locations onto the list of visited places. Above, the issue was you wanted to go to `/about` because that is what was after the hash. However, the `BrowserRouter` was reading it like normal. So it saw the home route at `/` with a hash of `/about` at the end. – searsaw Jul 14 '17 at 14:54

React Router redirects all requests to "/"

3 Answers3