React-router v4 嵌套路由和程序化导航

Question

因此，我以这种方式设置了几条路线：

索引.js

<Route exact path={pathDefault} component={Home}>
    <Route path={path1} component={component1}/>
    <Route path={path2} component={component2}/>
</Route>

组件1.js

<Route exact path={`${props.match.url}`} component={Summary}/>
<Route path={`${props.match.url}`/someOtherPath1} component={SubComponent1}/>
<Route path={`${props.match.url}`/someOtherPath2} component={SubComponent2}/>

component2.js 的设置类似。

这里的想法是我有多个具有默认页面的顶级路由。 但是，则可以在子路由之间进行切换。 这工作正常，直到，当在像component1/someOtherPath2这样的子级路由之一时，我可以在someOtherPath1和someOtherPath2之间切换，但是如果我然后尝试使用history.push(path2)更改顶级路由之一，而不是回到顶级组件（即 path1 的默认组件），它最终会推送复合的，因此不正确的路由，例如component1/component2 。

那么，当您在较低级别的组件中以编程方式（最好使用history.push或类似的）时，您将如何更改较高级别的路由？

Answer 1

history.push将路径作为参数而不是组件：

history.push（路径，[状态]）

例如：

history.push('/home');

或者

history.push('/home', { some: 'state' });

你可以在文档中阅读更多关于它的信息。

编辑：

如果您想更改根路径，也不要忘记前导/ 。 例如：

history.push('/path1/path2');