javascript - 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 将path 作为参数而不是component:

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

例如:

history.push('/home');

或

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

您可以在 docs 中阅读更多相关信息.

编辑:

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

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