Question

我正在尝试根据登录用户类型动态创建路由。这是我的代码：

createRoute(){
    var allRoutes = [];
    if(this.props.userType === "admin"){
      allRoutes.push((<Route path="Login" component={Login} />));
      allRoutes.push((<Route path="Dashboard" component={AdminDashboard} />));
      allRoutes.push((<Route path="UserManagement" component={UserManagement} />));
      allRoutes.push((<Route path="ResourceManagement" component={ResourceManagement} />));
      allRoutes.push((<Route from='*' to='Dashboard' />));
    }
    else if(this.props.userType === "user"){
      allRoutes.push((<Route path="Login" component={Login} />));
      allRoutes.push((<Route path="Dashboard" component={UserDashboard} />));
      allRoutes.push((<Route from='*' to='Dashboard' />));
    }
    else{
      allRoutes.push((<Route path="Login" component={Login} />));
      allRoutes.push((<Route from='*' to='Login' />));
    }
    return allRoutes;
  }

这就是我渲染那些

的方式

render(){
    return (
      <div className="contentArea">
        <Router history={hashHistory}>
          <Route path="/">
            {this.createRoute()}
          </Route>
        </Router>
      </div>
    );
  }

现在假设我第一次使用管理员用户登录时正确显示相关页面。

但是当我退出并使用普通用户登录时，它仍会显示管理页面，直到我刷新整个页面。

简而言之，当我们刷新页面时，不同类型的用户登录时，路由不会立即显示。

任何人都可以告诉我这里我做错了什么。

提前致谢。

Answer 1

但是当我注销并使用普通用户登录时如果仍然显示管理员页面，直到我刷新整个页面。

您需要使用componentWillReceiveProps。当您使用新用户登录时，这将更新组件，因为您将向其传递新的道具。

知道这一点，我会重新构造我的代码，以便能够传递新的道具。这就是我重新构建createRoute：

的方式

createRoute(userType){
  var allRoutes = [];
  if(userType === "admin"){
    allRoutes.push((<Route path="Login" component={Login} />));
    allRoutes.push((<Route path="Dashboard" component={AdminDashboard} />));
    allRoutes.push((<Route path="UserManagement" component={UserManagement} />));
    allRoutes.push((<Route path="ResourceManagement" component={ResourceManagement} />));
    allRoutes.push((<Route from='*' to='Dashboard' />));
  }
  else if(userType === "user"){
    allRoutes.push((<Route path="Login" component={Login} />));
    allRoutes.push((<Route path="Dashboard" component={UserDashboard} />));
    allRoutes.push((<Route from='*' to='Dashboard' />));
  }
  else{
    allRoutes.push((<Route path="Login" component={Login} />));
    allRoutes.push((<Route from='*' to='Login' />));
  }

  this.setState({routes: allRoutes});
}

正如您所看到的，我将参数传递给createRoute而不是实际的prop值，以便我们稍后可以使用新的道具重用它。此外，我没有返回路由数组，而是设置组件状态。

现在我们将使用状态渲染路径：

render(){
return (
  <div className="contentArea">
    <Router history={hashHistory}>
      <Route path="/">
        {this.state.routes}
      </Route>
    </Router>
  </div>
  );
  }

我们现在在createRoutes内打电话给componentDidMount：

componentDidMount(){
  this.createRoutes(this.props.userType)
}

最后，当您使用新用户登录时，我们将使用componentWillReceiveProps更新组件：

componentWillReceiveProps(newProps){
  //check if props are in fact new
  if(newProps.userType !== this.props.userType){
    //create new routes
    this.createRoutes(newProps.userType)
  }
}

无法动态设置路由React-Router

1 个答案: