Question

我有TestRouter类，它是我的父路由器，并且具有2个组件的路由：Test和RouterLinks。 RouterLinks是一个子路由器，具有用于PatternList和PatternCreator组件的路由。在TestRouter中，我定义了一个提示，当您打开PatternCreator时，“ when”条件将变为“ true”。

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

第一个：我从/ patterns转到/ patterns / patternCreator，当我想使用浏览器的后退按钮返回时，会弹出一个提示（如预期那样），但是我单击OK或Cancel都没有关系，因为它将始终将我重定向到/ patterns（在我单击“确定”或“取消”之前，URL已经更改）。

第二个：我在/ patterns / patternCreator中，然后单击“链接到/ patterns”（此链接始终在TestRouter中呈现，并且始终存在），出现提示（如预期），但是当我单击“确定”时，网址会更改，但不会呈现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

我解决了。为了使其正常工作，我只需要删除嵌套路由器中的Aug标签。

React Prompt在嵌套路由器中无法正常工作

1 个答案: