Question

我正在制作一组可定制的表单页面；由数据库驱动。

我使用当前路径名根据从数据库中提取的json数据构建每个QuestionPage组件，以获取适当的数据。

我的路线如下：

<Switch> 
        <Route exact path="/" render={() => <h1>HOME</h1>} />
        {this.state.navMenu}
        <Route path="/Dashboard" render={() => <Dashboard appBarTextCB={this.setAppBarText} text="Dashboard" navControl={this.navigationControl}/>} />  
        <Route path="/:pageName" render={() => <QuestionPage appBarTextCB={this.setAppBarText} tabName={this.props.location.pathname.slice(1)} navControl={this.navigationControl}/>} />
        <Route render={() => <ErrorPage errMsg="Route was not found" appBarTextCB={this.setAppBarText}  navControl={this.navigationControl}/>} />
</Switch>

如果我转到domain.com/XYZ，则会得到相应的XYZ“页面”。好极了。然后，如果我使用导航菜单转到domain.com/ABC，仍会看到XYZ信息。嘘。

如果我随后主动输入ABC页面的URL（或在页面上单击刷新），我会看到正确的ABC信息。

如果我使用导航菜单转到非动态路线之一，请说domain.com/Dashboard，然后再转到ABC ...，我得到ABC页面。如果随后我使用导航菜单转到XYZ，则ABC页面仍然存在。

我会注意到我已经在console.log的QuestionPage生命周期中添加了...，并且在使用导航菜单时，这些日志会附带我希望接收的信息。

我有点不知所措...我的最佳猜测是Router仅创建一个组件（而我正在寻找带有每个新url的新的，可引用的组件）-不会通过导航菜单进行更新。

所以我的问题是：如何正确执行此操作？

Answer 1

您正确的是，:pageName更改时不会挂载新组件。您可以从给match的函数中取出render路由道具，并将其作为道具传递给QuestionPage组件，并检查pageName URL参数是否发生了变化，然后重新加载您的数据。

Route

<Route
  path="/:pageName"
  render={({ match }) => (
    <QuestionPage
      match={match}
      appBarTextCB={this.setAppBarText}
      tabName={this.props.location.pathname.slice(1)}
      navControl={this.navigationControl}
    />
  )}
/>;

QuestionPage.js

class QuestionPage {
  getData = pageName => {
    // ...
  };

  componentDidMount() {
    this.getData(this.props.match.params.pageName);
  }

  componentDidUpdate(prevProps) {
    if (prevProps.match.params.pageName !== this.props.match.params.pageName) {
      this.getData(this.props.match.params.pageName);
    }
  }

  // ...
}

具有动态路由的页面加载外观相同

1 个答案: