Question

我正在构建一个测验应用，其中每条路线将导致不同的类别，并且在这些类别中，您有不同的测验等

我已经全部工作了，但它有点凌乱。任何人都可以对我可以做得更好的事情有所了解。即时通讯使用react，react-router和redux

目前我有这个：

  <ConnectedRouter history={history}>
    <div className="contentBody">
      <h3> {userStatus.currentCategory} </h3>
      {this.state.quizzes.map((quiz) => (
        <div>
          <li className="quizLink">
            <Link to={`/categories/${quiz.category}/${quiz.quizId}`} >{quiz.title}</Link>
          </li>
          <Route path={`/categories/${userStatus.currentCategory}/${quiz.quizId}`} exact component={QuizComponent}/>
        </div>
      ))}
    </div>
  </ConnectedRouter>

它要求我映射状态中的所有类别，然后根据该状态为它们创建路径。我会在一个单独的路径文件夹中，包含应用程序中的所有路径。但我不知道如何创建动态路线，例如/categories/geography和/categories/sport每次都没有映射状态？

我的redux商店中有currentCategory的概念。但只有在有人点击类别

后才会更新

很高兴有这样的事情：

  <ConnectedRouter history={history}>
    <Switch>
      <Route path="/categories/${category}" component={Category} />
    </Switch>
  </ConnectedRouter>

可以设置这一条路线，然后根据网址中的内容动态生成不同的内容

欢迎任何提示

如何在反应路由器中更有效地进行动态路由

0 个答案: