Default Route With React Router 4 Default Route With React Router 4 reactjs reactjs

Default Route With React Router 4


Actually, it's pretty straightforward...

Use Redirect component to... well, redirect.

<Redirect from="/steps" exact to="/steps/whatever" />

exact prop guarantees you won't be redirected from sub-route.

Edit: after all, Redirect does support exact (or strict) props. No need to wrap in Route. Answer updated to reflect that.


Pedr, I think that this will solve your problem.

<Route path="/" exact component={Home} /><Route path="/select-steps" render={() => <StepSelectorContainer />} /><Route path="/steps" component={StepsComponent} />

And then in your StepsComponent render method, you can do this.

<Switch>{steps.map(step => (    <Route        path={fullPathForStep(step.uid)}        key={shortid.generate()}        render={() => <StepContainer step={step} />}    />}<Redirect from="/steps" exact to="/steps/alpha" /></Switch>

What this will do is render your steps component because it the route begins with /steps. After that is rendered, then it will render one of the nested routes based off the url. If the url is just "/steps", then it will redirect to the initial route listed here, in this case "/steps/alpa" by rendering the redirect. The Switch will make it so that it only renders one of the routes.

Credit to Andreyco for the redirect code.

I hope this helps.