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} />
  );
}

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