即时生成 React 路由

Question

我目前正在开发一个活动管理应用程序，允许客户注册由多个活动组织者创建的活动。后端 API 路由如下所示：

http://my-app.com/eventorganizer1/events/event_id=1/new
http://my-app.com/eventorganizer1/events/event_id=2/new
http://my-app.com/eventorganizer2/events/event_id=1/new
http://my-app.com/eventorganizer3/events/event_id=1/new

我可以采用什么策略来动态生成它们（例如，假设所有事件组织者都存储在猫鼬模型中），而不是由事件组织者在 React Router 中显式声明所有路由？r

Answer 1

为了后代，我找到了问题的答案。

想法是通过类似地图函数的东西从 mongoose/array/API 生成 'Links'，然后使用 React-Router 汇集路由，最后通过 match.params 处理这些路由：

const EventOrganisers = () => (
  <div>
    <ul>
      {
        eventorganisersAPI.all().map(p => (
          <li key={p.number}>
            <Link to={`/eventorganiser/events/${p.number}`}>{p.name}</Link>
          </li>
        ))
      }
    </ul>
  </div>
)

...

<Route path='/eventorganiser/events/:event_id' component={Event}/>

Answer 2

如果您想设置一个更通用的路由处理程序，您可以添加以下路由并创建一个组件来处理所有请求：

Route path="*" component={RouteHandler} />

即时生成 React 路由

Generating React routes on the fly

reactjs

react-router

react-router-v4