react-router 4不会让我重定向回首页吗？

Question

I have something like this using react-router 4:

    <Route exact path="/" children={({match}) => (
      <TransitionGroup component={firstChild}>
        {match && <Home match={match} />}
      </TransitionGroup>
    )}/>
    <Route exact path="/idea/:id" children={({match}) => (
      <TransitionGroup component={firstChild}>
        {match && <IdeaDetails match={match} />}
      </TransitionGroup>
    )}/>
    <Redirect from='*' to='/' />

Basically if someone types in a url other than idea/:id , I want to redirect them back to the home page. When I run this code, it seems to do I expect. Except in the developer consoles, I see this warning

Warning: You tried to redirect to the same route you're currently on: "/"

Is there a way to define the routes that I have without tripping this warning? Is there a way to tell react router to not process any subsequent route rules once one of them has been found?

Answer 1

Is there a way to tell react router to not process any subsequent route rules once one of them has been found?

Yes, you need to wrap your routes in a Switch component . When your routes are wrapped in a Switch , it finds the FIRST matching route and then returns it without continuing. Without a Switch , the router will return ALL routes that match the current url.