CODEWITHSUNDEEP
javascriptreactjsreact-router
user1371896
user1371896

Reputation: 2240

Clicking on navbar, sub routes getting appended every time

I was trying my hands on react routing with browser history. Technically it works very fine. But the issue I am faceing is, the routes get appended everytime I click on it gets same path gets appended like,

by default if it is localhost:portno/postLogin/page1, on second click it will become localhost:portno/postLogin/postLogin/page2 and on clicking another link it will be become localhost:portno/postLogin/postLogin/postLogin/page3 and so on

             `var Router = require('react-router').Router;
              var Route = require('react-router').Route;
              var IndexRedirect = require('react- router').IndexRedirect;
              var browserHistory = require('react-router').browserHistory;


              module.exports = React.createClass({
                    render:function(){
                       return(
                            <Router history={browserHistory}>
                                <Route path="/" component={preLogin}/>
                                <Route path="postLogin" component={postLogin}>
                                    <IndexRedirect to="page1" />
                                    <Route path="page1" component={page1}/>
                                    <Route path="page2" component={page2}/>
                                    <Route path="page3" component={page3}/>
                                 </Route>
                            </Router>
                           )}
                 });

My navbar page has the content linked as

<li><Link to={"postLogin/page1"}></Link></li>
<li><Link to={"postLogin/page2"}></Link></li>

One thing I tried doing is making changes to link like below, but that gives me error, "React Router did not match any routes" <li><Link to={"page2"}></Link></li>

Where am I doing it wrong?

Upvotes: 1

Views: 74

Answers (1)

Dmitriy Nevzorov
Dmitriy Nevzorov

Reputation: 6078

You need to start all you routes form / like <Link to={"/postLogin/page1"}></Link>.
This way url would be appended to a base route and not to a parent one.

Upvotes: 1

Related Questions