reactjs - React-Router - 在运行时添加/删除路由

Question

我有一个支持每个用户权限的应用程序。因此，如果用户拥有适当的权限，他就能够管理用户、组等。如果用户没有此类许可，他可能不会这样做。

我有一个rest api，带有一个端点，返回当前用户所有允许的链接，通过它，我想为react-router设置路由。如果权限被编辑，例如，用户失去编辑用户的权限，相应的菜单项应该从菜单中消失，并且路由从路由器中删除。否则应添加菜单项和路线。

现在我有这样的设置:

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={Window}>
        <IndexRoute component={Users} />
        <Route path="users" component={Users} />
        <Route path="groups" component={Groups} />
        <Route path="permissions" component={Permissions} />
        <Route path="*" component={Error} />
      </Route>
    </Router>
  </Provider>, mount);

但我真正想要的是:一个动态执行此设置并且可以在每次权限更改时运行的函数。

我找不到任何相关文档，如果有办法做到这一点，我会很高兴。

更新

根据给出的答案和评论，我意识到我想要解决这个问题的方式并不符合react-router的声明性性质。

Answer 1

在我的一个项目中，我有以下设置，我想你会发现它很有用:

componentWillMount() {
  let routes = [];

  routes.push({
    path: '/authenticate',
    component: LoginPage
  });

routes.push({
  path: '/',
  component: Main,
  indexRoute: { component: null },
  getChildRoutes: (error, callback) => {
    getNavigation().then((nav) =>{
      callback(null, getChildRoutes(nav.paths))
    })
  },
  onEnter: () => {
    getNavigation();
    let token = getToken();
    if (token == null || token === '') redirectToAuthenticationUrl();
  }
});

this.routes = routes;

render() {
  return (
    <Router key={uuid()} history={history} routes={this.routes} />
  );
}

您可以将您的路由存储在一个对象中，并传递一个将返回您的路由的 promise ，您还可以通过这种方式轻松检查权限。希望有帮助!