React-router: I want to use <IndexRedirect> in this new version, What should I do?

[lulei90]

I have a root container App I want to match path '/ ' to render App component and Home component,in version3 I can use to do it,but this new version I don't know how to do

[inchr]

Seems to not working yet #4539 and #4582
Stay on react-router 3.x. I'm downgrading too.

[inchr]

Sorry my bad, you can still do it:
In index.js put this route:
<Route exact path="/" component={App}/> And then in App.js put this:
<Route exact path="/" component={Home}/>

[timdorr]

Index routes and redirects do not exist in 4.0. You'll either need to keep to 3.0 or approach the problem in a different way.

[simenbrekken]

@timdorr <Redirect /> is still in 4.0 and I believe the following use-case is still valid:

const Application = () => (
  <Switch>
    <Route path="/orders" component={Orders} />
    <Redirect from="/" to="/orders" />
    <Route component={NotFound} />
  </Switch>
)

This won't work as the <Redirect /> will catch anything and prevent NotFound from being rendered. It doesn't look like the from parameter is used in Redirect at all. I would also expect <Redirect /> to supportexact` but I might be wrong here.

[timdorr]

Index routes and [index] redirects do not exist. I didn't use an oxford comma on purpose there, but I can see how that's easy to read the other way around.

Switch uses from. Technically, they don't have to be Routes or Redirects. So, any component inside of a Switch can use the exact prop in this case. That should work for your use case.

[simenbrekken]

@timdorr Thanks for the swift reply. It seems this could easily be solved by a clarification in the <Redirect> docs.

[cloverich]

Another example if someone lands here looking for help. I had something like this previously:

  <Route path="tasks" component={Tasks} >
    <Route path="error" component={TaskError} />
    <Route path=":taskId" component={TaskRouter} />
    <IndexRedirect to="load-next" />
  </Route>

In RR4, I removed the IndexRedirect. Then, I moved the route's to my Tasks component's render method, and added a check for the index:

render() {
  if (this.props.match.isExact) {
    return <Redirect to="/tasks/load-next" />
  }

  return (
    <div className="Tasks">
      <Switch>
        <Route path="/tasks/load-next" component={TaskLoader} />
        <Route path="/tasks/error" component={TaskError} />
        <Route path="/tasks/:taskId" component={TaskRouter} />
      </Switch>
    </div>
  );
}

[liunaijia]

I use the following code as the replacement of <IndexRedirect /> in version 4.

<Router>
  <Route exact path="/" component={() => <Redirect to="/home" />}/>
  <Route path="/home" component={Home} />
</Router>

[Tjorriemorrie]

@liunaijia typescript gives (17,56): Lambdas are forbidden in JSX attributes due to their rendering performance impact

[liunaijia]

@Tjorriemorrie it seems typescript doesn't like component={() => <Redirect to="/home" />}/>, you probably could create a component instead. For example

const RedirectToHome = () => <Redirect to="/home" />;
<Route exact path="/" component={RedirectToHome} />