CODEWITHSUNDEEP
reactjsreact-router
John Sourcer
John Sourcer

Reputation: 451

React router routes fall through?

I have the following route:

<Router history={hashHistory}>
  <Route path='/' component={ContainerApp}>
    <Route component={ContainerAuth}>
      <Route path="login" component={Login}/>
    </Route>
    <Route component={ContainerMain}>
      <IndexRoute component={Home}/>
      <Route path='settings' component={Settings}/>
      <Route path='*' component={NotFound}/>
    </Route>
  </Route>
</Router>

const ContainerApp = (props) => 
  <div>
    {props.children}
  </div>


const ContainerMain = (props) => 
  <div className="mainwrapper">
    <Header />
    <div id="main">
      <div id="wrapper" className="wrapper">
        <DecoratedSidebar />
        <section id="content">
          {props.children}
        </section>
      </div>
    </div>
    <Footer />
  </div>

const ContainerAuth = (props) => 
  <div>
    {props.children}
  </div>

If I type the url '/login' into the browser it routes to the page correctly. If I push using:

this.props.router.push({
    pathname: '/login'
});

It renders ContainerAuth.Login and then appears to fall through and renders ContainerMain.Home?

Is this expected behavior i.e.the fall through?

Upvotes: 1

Views: 616

Answers (1)

John Sourcer
John Sourcer

Reputation: 451

I come before you with my tail between my legs, face red and bottom smacked.

The logout link wasn't preventing default:

e.preventDefault();

Upvotes: 2

Related Questions