CODEWITHSUNDEEP
reactjsreact-router
Ionut Cirja
Ionut Cirja

Reputation: 117

React router v4 nesting

My routes config looks like this:

[
    {
        path: '/',
        exact: true,
        component: Dashboard
    },
    {
        path: '/stories/:storyId',
        component: Story,
    },
    {
        component: Dashboard,
        status: 404
    }
]

Now inside of the Story component I want to render a gallery and every photo needs to have its own url. Did something like this:

<Switch>
    <Redirect from={match.url} to={`${match.url}/1`} />
    <Route path={`${match.url}/:photoId`} render={this.renderGallery } />
</Switch>

Unfortunately it goes into an infinite loop cause match.url never changes after the redirect.

Can somebody help me with this? Thank you

Upvotes: 0

Views: 117

Answers (1)

Tim Dorr
Tim Dorr

Reputation: 4931

The from on <Redirect> matches loosely by default. As you have it, it will match anything that starts with whatever's in match.url, which includes your ${match.url}/1 path.

Inside of Switch, it's actually reading the props of its children directly and doesn't distinguish the type of component. So, you can use exact and strict like you can on a Route.

Therefore, this should work for you:

<Switch>
  <Redirect exact from={match.url} to={`${match.url}/1`} />
  <Route path={`${match.url}/:photoId`} render={this.renderGallery } />
</Switch>

Upvotes: 1

Related Questions