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

Question

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

index.js

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

component1.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 将 path 作为参数，而不是 component：

history.push(路径，[状态])

例如：

history.push('/home');

或

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

您可以在docs 中了解更多信息。

编辑：

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

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