CODEWITHSUNDEEP
reactjsreact-router-v4
learningtech
learningtech

Reputation: 33715

react-router four won't let me redirect back to home?

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?

Upvotes: 0

Views: 69

Answers (1)

Chase DeAnda
Chase DeAnda

Reputation: 16441

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.

Upvotes: 1

Related Questions