CODEWITHSUNDEEP
javascriptreactjsreact-routerbabeljs
Behdad
Behdad

Reputation: 1629

React Router redirects all requests to "/"

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.

Upvotes: 1

Views: 2955

Answers (3)

Henrique Oecksler Bertoldi
Henrique Oecksler Bertoldi

Reputation: 1054

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')
);

Upvotes: 2

searsaw
searsaw

Reputation: 3622

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');

Upvotes: 1

Ivan Burnaev
Ivan Burnaev

Reputation: 2730

Wrap you routes with <Switch> component.

Upvotes: 1

Related Questions