CODEWITHSUNDEEP
reactjsreact-router
mezod
mezod

Reputation: 2391

IndexRoute not working for "/"

I have a router with react-router 2.4 that looks like:

import ReactDOM from 'react-dom';
import React from 'react';
import { IndexRoute, Router, Route, browserHistory } from 'react-router';
import { Provider } from 'react-redux';
import * as Pages from 'pages';
import App from 'containers/App/App';
import store from './stores';

function requireAuth(nextState, replace) {
  if (!store.getState().user) {
    replace('/login');
  }
}

export default function render() {
  ReactDOM.render(
    <Provider store={store}>
      <Router history={browserHistory}>
        <Route path="/">
          <Route path="login" component={Pages.Login} />
          <Route path="/" component={App} onEnter={requireAuth}>
            <IndexRoute component={Pages.Dashboard} />
            <Route path=":list_id" component={Pages.List} />
          </Route>
        </Route>
      </Router>
    </Provider>,
    document.getElementById('lists')
  );
}

Everything works except the IndexRoute. If I put the IndexRoute inside the App context, it doesn't work. If I put it outside of the App context, then it works. How can I define a route for "/" that's within the App context while allowing for other routes like Login to be outside of it?

My App render the this.props.children properly, since it works as expected for the List component.

Upvotes: 1

Views: 976

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104519

You are using same path = '/' multiple times, instead of that use unique path values also make login as a separate route.

Define the routes like this:

<Router history={browserHistory}>
    <Route path="/login" component={Pages.Login} />
    <Route path="/" component={App} onEnter={requireAuth}>
        <IndexRoute component={Pages.Dashboard} />
        <Route path=":list_id" component={Pages.List} />
    </Route>       
</Router>

Upvotes: 1

Related Questions