Reactjs 动态生成反应路线

Reactjs 动态生成反应路线,reactjs,react-router,react-router-v4,Reactjs,React Router,React Router V4,我目前正在开发一个事件管理应用程序,允许客户注册由多个事件组织者创建的事件。后端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/eventorganize

我目前正在开发一个事件管理应用程序,允许客户注册由多个事件组织者创建的事件。后端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内的活动组织者明确声明所有路线,而是我可以采用什么策略来动态生成它们(例如,假设所有活动组织者都存储在mongoose模型中)?r

对于后代,我找到了我问题的答案

我们的想法是通过类似map函数的方式从mongoose/array/API生成“链接”,然后使用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}/>
const EventOrganisers=()=>(
    { EventOrganisrAPI.all().map(p=>(
  • {p.name}
  • )) }
) ...
如果要设置更通用的路由处理程序,可以添加以下路由并创建一个组件来处理所有请求:

路由路径=“*”组件={RouteHandler}/>