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.