React-router: Ignore the "path" key instead of a warning for indexRoute

[jgoux]

Hi,

Would it be possible to ignore the path key when passing a route object as an indexRoute instead of trigerring the warning : Index routes should not have paths ?

So we can reuse our routes objects without the need of omiting the path key each time we want to define a route as an indexRoute.

For example, all my routes declarations are colocated with their view folder, so I end with something like this :

// .../src/views/App/views/ScanBarcode/index.js
import ScanBarcode from "./components/ScanBarcode"

export default {

    path: "/scanner-code-barres",

    component: ScanBarcode

}

// .../src/views/App/index.js
import App from "./components/App"
import ScanBarcode from "./views/ScanBarcode"

export default {

    path: "/",

    component: App,

    indexRoute: ScanBarcode,

    childRoutes: [
        ScanBarcode
    ]

}

As my ScanBarcode route contains the path key (because I want it to be accessible with both "/" and "/scanner-code-barres"), passing directly the whole route object will trigger the warning.

[taion]

Why do this though? If you have this elsewhere, just do e.g. {path, ...route} or whatever. Having a path on an index route will actually cause problems right now.

In the list of active routes we don't keep track of which routes are index routes or not, so we need there to not be a path to figure out whether you're actually on the index (v. on some other route).

[jgoux]

Ok, I wasn't sure of the reason for the warning, now I know. :+1:
Thanks for your quick answer, const { path, ...indexRoute } = ScanBarcode will do the job. :)

[gharley]

I have a situation where I have to have a path on the index route (but I'm open to a better solution). I have a series of nested routes e.g.
  <Route path="/general" component={General}>
    <IndexRoute path="info" component={Info}/>
    <Route path="info" component={Info}/>
    <Route path="item" component={Item}/>...
If I do not place the path on the index route then the "active" class does not always stick on both links.

[cynamonium]

@gharley - you can use IndexRedirect:

<IndexRedirect to="/default-path" />
<Route path="/default-path" component={DefaultComponent} />

[gharley]

@cynamonium - Excellent, that works perfectly! Thank you.