Default route nested in anonymous route no longer working

[jscheid]

It would be nice if this worked in 1.0:

    <Route path="/(:locale)">
      <Route path="login" component={Login}>
      <Route component={App}>
        <IndexRoute component={Dashboard} />
        /* more routes here */
      </Route>
    </Route>

In 0.13 I had it working like so:

    <Route handler={Locale} path="/:locale?">
      <Route name="login" handler={Login} />
      <Route handler={App} path="">
        <DefaultRoute name="dashboard" handler={Dashboard} />
      </Route>
    </Route>

But now, path /en/ gets resolved to Locale rather than Dashboard.

I've tried various ways of rearranging the routes but can't seem to get it to resolve to Dashboard no matter what I try. Perhaps I'm missing something?

[ryanflorence]

can you list some urls and which components you expect to be rendered? I can't quite follow what is expected.

[jscheid]

I'd expect /en/ to match the IndexRoute but instead it only matches the outermost route. Essentially it would be nice if it could do a "deep" or "greedy" match, following any anonymous nested routes. Sorry if I'm not explaining this very well, I hope this makes more sense?

[flocks]

I think this is the behaviour I was trying to explain in #2037

Suppose we have the following layout

The header is always visible.
If we go to /login, the content ( with the menu ) disappears, to show the login form.
The route "/" should display the Content with SubHome1 as default page. If we go to /subHome2 only the right part change.

I managed to implement this in react-router 0.13 doing

<Route handler={App} name="app" path="/">
    <DefaultRoute handler={Home} />
    <Route handler={Home} name="home" path="/">
            <Route handler={subHome1} name="subHome1" path="/" />
            <Route handler={subHome2} name="subHome2" path="/subHome2" />
      </Route>
      <Route handler={Login} name="OtherPage1" path="/login" /                

But I can't make it work with react-router 1. Is it still even possible ?

Sorry @jscheid if it's unrelated but I think it could be.

[jscheid]

It looks like the same issue to me @flocks

[knowbody]

@jscheid it seems like you are trying to do similar thing to #2159

[jscheid]

@knowbody no, this is different from #2159. I guess the locale part is a bit of a red herring. Instead, the issue seems to be that index routes won't be matched when nested inside anonymous routes (by which I mean routes without a path attribute.)

I think the problem is here: https://github.com/rackt/react-router/blob/e738c88a05a537d4b93b5946097eb2629598fa74/modules/matchRoutes.js#L56 which will stop as soon as the path so far matches, which sometimes is too early.

All this being said, I've now worked around the issue by getting rid of anonymous routes (using outer components inside the nested routes instead), so feel free to close this. However, I still think it would be useful if this worked (like it did in 0.13).

[ekaradon]

@jscheid, I think that I am facing the same issue. I have something like that:

    <Route path='/' component={App}>
        <IndexRoute component={Authent}
                    onEnter={(location, replaceWith) => authenticated(location, replaceWith)}>
            <IndexRoute component={Dashboard} />
            <Route path='dashboard' component={Dashboard}>
                <Route path='add/?' component={AddWidget} />
            </Route>
            <Route path='account/?' component={Account} />
            <Route path='*' component={NotFound}/>
        </IndexRoute>
        <Route path='login(/:email)' component={Login} />
        <Route path='register/?' component={Register} />
    </Route>

However, I do not see the dashboard appearing.

[jscheid]

@ekaradon as far as I understand you're not supposed to nest anything inside an IndexRoute but yes, if you were to restructure it to use a pathless Route it looks like you would run into the same issue.

[danieljuhl]

I'm also facing this issue, migrating from 0.13.3 to 1.x.
I'm trying to render App > List > Home for the root of the application /.

I've tried to following, with no luck.

<Route path='/' component={ App } history={ history }>
  ...
  <Route component={ List }>
    <Route component={ Home }>
  </Route>
  ...
</Route

<Route path='/' component={ App } history={ history }>
  ...
  <Route component={ List }>
    <IndexRoute component={ Home }>
  </Route>
  ...
</Route

<Route path='/' component={ App } history={ history }>
  ...
  <Route component={ List }>
    <Route path='/' component={ Home }>
  </Route>
  ...
</Route

<Route path='/' component={ App } history={ history }>
  ...
  <Route path='/' component={ List }>
    <Route path='/' component={ Home }>
  </Route>
  ...
</Route

[knowbody]

@danieljuhl This just doesn't make sense... If you want to do that why you just don't put Home and List inside and App component and then have a route like:

<Route path='/' component={ App }>
...
</Route>

Also just as a side note, the history is a Router property:

<Router history={ history }>
  <Route path='/' component={ App }>
    ...
  </Route>
</Router>

[danieljuhl]

@knowbody I does make sense, but I might have left too much out.

<Route component={ List }>
  <Route path='/area' component={ Area } />
  <Route path='search' component={ Search } />
  <Route path='/type' component={ Type } />
  <Route path='/' component={ Home } />
</Route>

App contains the application layout (header, footer, etc) and List contains layout for the content part, when it is a list page, which there is several versions of, which only affect a minor part of the whole content.

[knowbody]

@danieljuhl now it's a bit more clearer :)

If I understood correctly this is what you look for (quick example):

import React, { PropTypes, Component, ContextTypes } from 'react';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import { Router, Route, Link, IndexRoute } from 'react-router';

class Navigation extends Component {
  render() {
    return (
      <div>
        <ul>
          <li><Link to='/'>Home</Link></li>
          <li><Link to='/search'>Search</Link></li>
        </ul>
      </div>
    );
  }
};

class Search extends Component {
  render() {
    return <h3>Search</h3>;
  }
}

class Home extends Component {
  render() {
    return <h3>Home</h3>;
  }
}

class List extends Component {
  render() {
    return (
      <div>
        <h3>List</h3>
        {this.props.children}
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div>
        <h1>App</h1>
        <Navigation />
        {this.props.children}
      </div>
    );
  }
}

export default class Root extends Component {
  render() {
    return (
      <Router history={createBrowserHistory()}>
        <Route component={App}>
          <Route path='/' component={List}>
            <IndexRoute component={Home} />
            <Route path='search' component={Search} />
          </Route>
        </Route>
      </Router>
    );
  }
}

[knowbody]

also @jscheid and @flocks could you tell me if this issue can be closed, because this issue starting to be like an open ended question...

[danieljuhl]

@knowbody Spot on, besides I have a bunch of other routes, so that path='/'should be located on the first (and outer-most) route. Hence the ... in the initial comment.