Reactjs 如何使用auth执行角色智能反应路由？

我遵循React router 4示例中的受保护路由，使用该受保护方法登录。下一步是我想使用基于角色的路由，例如user可以使用/user，admin可以使用/admin页面

class Routing extends Component {
    render(){
        return (
            <Switch>
                <Route path="/login" component={Login} />
                <PrivateRoute exact path="/" component={App} />
            </Switch>
        )
    }
}
function PrivateRoute({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        fakeAuth.isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );
}

类路由扩展组件{
render（）{
返回(
)
}
}
函数privaterout（{component:component，…rest}）{
返回(
伪造的。是否已验证(
) : (
)
}
/>
);
}

在该组件中，它是用户/管理员的公共组件，在检查该组件中的用户/管理员角色后，我想将其重定向为用户，如果它是用户或它将是管理员

甚至我也想在全球范围内处理/用户路由器和/管理员路由器

这是我尝试过的，但似乎不起作用

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="">
          <h1>Payement</h1>
        </header>
        <div>
          <Route exact path='/user' component={User} />
          <Route exact path='/admin' component={Admin} />
          {
            localStorage.getItem('role') === 'user' &&
            <Redirect to={'/user'} />
          }
          {
            localStorage.getItem('role') === 'admin' &&
            <Redirect to={'/admin'} />
          }
        </div>
      </div>
    );
  }
}

类应用程序扩展组件{
render（）{
返回(
帕耶芒
{
localStorage.getItem（'role'）=='user'&&
}
{
localStorage.getItem（'role'）=='admin'&&
}
);
}
}

更换

 <PrivateRoute exact path="/" component={App} />

其他注释

此外，如果我能给我2美分，除非有必要，否则避免使用REF

检索输入值的正确方法如下

 <input onChange={(event) =>  this.setState({loginvalue: event.target.value})} />

---

这将在路由组件中的单个文件中的所有路由之后起作用

class Routing extends Component {
    render(){
        return (
            <Switch>
                <Route path="/login" component={Login} />
                <PrivateRoute exact path="/" component={App} />
                <PrivateRoute path='/user' component={User} />
                <PrivateRoute path='/admin' component={Admin} />
            </Switch>
        )
    }
}

类路由扩展组件{
render（）{
返回(
)
}
}

---

并删除了app.js文件中的路由。

为什么它不起作用？当前的行为/错误是什么？@MosèRaguzzini它只加载应用程序组件，用户组件不加载。。控制台中有错误吗？@MosèRaguzzini没有错误。@mhmh我没有看到包装您的路由。我只是检查是否有可用的。我将为用户和管理员更改。感谢您的输入值更新。。

 <input onChange={(event) =>  this.setState({loginvalue: event.target.value})} />

this.state.loginvalue

class Routing extends Component {
    render(){
        return (
            <Switch>
                <Route path="/login" component={Login} />
                <PrivateRoute exact path="/" component={App} />
                <PrivateRoute path='/user' component={User} />
                <PrivateRoute path='/admin' component={Admin} />
            </Switch>
        )
    }
}