反应提示在嵌套路由器中无法正常工作

Question

我有一个TestRouter类，它是我的父路由器，有两个组件的路由：Test和RouterLinks。RouterLinks是一个子路由器，它具有PatternList和PatternCreator组件的路由。在TestRouter中，我定义了一个Prompt；当"；条件变为"0"；真"；当你打开PatternCreator时。

现在我有两种奇怪的情况。

第一个：我从/patters转到/patters/patternCreator，当我想使用浏览器的后退按钮返回时，会弹出一个提示(正如预期的那样(，但无论我单击"确定"还是"取消"都无关紧要，因为它无论如何都会将我重定向到/patters(在我单击"OK"或"取消"之前，URL已经更改(。

第二个：我在/patterns/patternCreator中，我正在单击链接到/patterns(这个链接在一直存在的TestRouter中呈现(，会显示一个提示(正如预期的那样(，但当我单击"确定"时，URL会更改，但PatternList不会呈现(我仍然看到PaternCreator(。我认为问题是TestRouter的路由没有改变，所以它没有看到改变，也没有呈现不同的组件。。？

有什么想法我该如何处理这些问题吗？

TestRouter类路由器：

<Router>
<Prompt when={this.state.isPromptActivated} message="Are you sure?"></Prompt>
<LinkTest></LinkTest>
<Switch>
<Route path="/patterns" render={(newProps) => <RouterLinks promptActivate={this.promptActivate} promptDeactivate={this.promptDeactivate} apiAuthHeader={this.props.apiAuthHeader} patternValues={this.props.patternValues} {...newProps}></RouterLinks>}>
</Route>
<Route path="/test" render={(newProps) => <TestComponent apiAuthHeader={this.props.apiAuthHeader} {...newProps} />}>
</Route>
</Switch>
</Router>

RouterLinks类路由器：

<Router>
<Switch>
<Route exact path="/patterns" render={(newProps) => <PatternList apiAuthHeader={this.props.apiAuthHeader} {...newProps}/>}>
</Route>
<Route path="/patterns/patternCreator" render={(newProps) => <PatternCreator promptActivate={this.props.promptActivate} promptDeactivate={this.props.promptDeactivate} apiAuthHeader={this.props.apiAuthHeader} {...newProps}/>}>
</Route>
</Switch>
</Router>

Answer 1

我解决了它。为了使它工作，我只需要删除嵌套路由器中的<Router>标记。