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将路径作为参数，而不是组件：

history.push（path，[state]）

例如：

history.push('/home');

或

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

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

编辑：

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

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

React-router v4嵌套路由＆amp;程序化导航

1 个答案: