具有动态路由的页面加载看起来相同

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>

如果我转到域。com/XYZ 我会得到适当的 XYZ 'page'。耶。如果我然后使用我的导航菜单转到域。com/ABC 我仍然看到 XYZ 信息。嘘.

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

如果我使用导航菜单转到其中一个非动态路由，比如域。com/Dashboard 然后转到 ABC...我得到 ABC 页面。如果我然后使用导航菜单转到 XYZ，ABC 页面仍然存在。

我会注意到我已将 console.log 放入问题页面生命周期中...并且在使用导航菜单时，这些日志会包含我希望收到的信息。

我有点不知所措......我最好的猜测是 Router 只创建一个组件（我正在寻找一个新的，可引用的组件，每个新 url) - 未随导航菜单更新。

所以我的问题是：我怎样才能正确地做到这一点？

Answer 1

您说得对，:pageName 更改时未安装新组件。您可以从提供给 render 的函数中取出 match 路由道具并将其作为道具传递给 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);
    }
  }

  // ...
}

具有动态路由的页面加载看起来相同

Page loads with dynamic route look same

javascript

reactjs

react-router-v4