Javascript React Router 4 的默认路由
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42907436/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Default Route With React Router 4
提问by Undistraction
fI currently have the following routes defined in my application:
f我目前在我的应用程序中定义了以下路由：
/
/selectSteps
/steps
/steps/alpha
/steps/beta
/steps/charlie
Which could also be visualised like this:
也可以像这样可视化：
- (home)
- selectSteps
- steps
- alpha
- beta
- charlie
My root component looks like this:
我的根组件如下所示：
<Route path="/" exact component={Home} />
<Route path="/select-steps" render={() => <StepSelectorContainer />} />
<Route path="/steps" component={StepsContainer} />
My Steps component does this:
我的 Steps 组件执行以下操作：
steps.map(step => (
<Route
path={fullPathForStep(step.uid)}
key={shortid.generate()}
render={() => <StepContainer step={step} />}
/>
This all works nicely, but I don't want stepsto exist as route in its own right. Only its child routes should be visitable. So I'm looking to lose the /stepsroute to leave my routes as:
这一切都很好，但我不想steps作为路线本身存在。只有它的子路由应该是可访问的。所以我希望失去/steps路线以离开我的路线：
/
/selectSteps
/steps/alpha
/steps/beta
/steps/charlie
How should I configure my routes for this? Ideally, hitting /stepswould redirectto the first child route.
我应该如何为此配置我的路由？理想情况下，命中/steps将重定向到第一个子路由。
回答by Andreyco
Actually, it's pretty straightforward...
其实，这很简单……
Use Redirectcomponent to... well, redirect.
使用Redirect组件来......好吧，重定向。
<Redirect from="/steps" exact to="/steps/whatever" />
exactprop guarantees you won't be redirected from sub-route.
exactprop 保证您不会从子路由重定向。
Edit:after all, Redirectdoes support exact(or strict) props. No need to wrap in Route. Answer updated to reflect that.
编辑：毕竟，Redirect支持exact（或strict）道具。无需包裹Route。答案已更新以反映这一点。
回答by Guardian_nw
Pedr, I think that this will solve your problem.
Pedr，我认为这将解决您的问题。
<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.
然后在您的 StepsComponent 渲染方法中，您可以执行此操作。
<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.
这将做的是渲染您的步骤组件，因为它的路由以 /steps 开头。在渲染之后，它将根据 url 渲染嵌套路由之一。如果 url 只是“/steps”，那么它将通过呈现重定向重定向到此处列出的初始路由，在本例中为“/steps/alpa”。Switch 将使它只呈现其中一个路由。
Credit to Andreyco for the redirect code.
归功于 Andreyco 的重定向代码。
I hope this helps.
我希望这有帮助。
