React-router: <Redirect> renders blank page

[evoyy]

Version 4.1.1

When navigating to /settings I want it to redirect to /settings/profile

I expected this to work

javascript <Switch> <Redirect from="/settings" to="/settings/profile" /> <Route path="/settings" component={Settings} /> </Switch>

The URL in the address bar is updated but nothing is rendered.

Instead I have to do this:

javascript <Switch> <Route exact path="/settings" render={() => { return <Redirect to="/settings/profile" /> }} /> <Route path="/settings" component={Settings} /> </Switch>

Is this expected behaviour?

[evoyy]

Related to https://github.com/ReactTraining/react-router/issues/5003 ?

[oliverasistemas]

Did you try using exact on the redirect route?

[timdorr]

Yeah, that's what is happening here. Your Redirect is loosely matching the pathname, so you're getting into a loop.

[evoyy]

That works, thanks. I didn't think that Redirect accepted an exact prop, but I just saw this:

When you include a <Redirect> in a <Switch>, it can use any of the <Route>'s location matching props: path, exact, and strict. from is just an alias for the path prop.

[alexilyaev]

@timdorr I think that line in the doc that mentions we can use any props of Route on our Redirect should also be under the Redirect section of the doc:
https://reacttraining.com/react-router/web/api/Redirect

I completely missed it and wondered why things didn't work, and only later found this issue and the mentioned line.