基于角色的同一 React 路由中的不同组件

Question

我想根据用户角色在同一个 React 路由上设置不同的组件。

这就是我所做的。

// AppRouter.js
const AppRouter = () => {

    const {loading, data, error}  = useQuery(GET_CURRENT_USER)

    if (loading) return <span>Loading...</span>
    if (error) return <Redirect to="/login"/>

    if (data) {
        let {me: {role}}= data

        if (role === 'user') {
            return (
                    <Switch>
                        <Route to="/" component={EmployeeHome}/>
                        <Route path="/login" exact component={SigninForm} />
                    </Switch>
            )
        } else {
            return (
                    <Switch>
                    <Route to="/" component={AdminHome}/>
                    <Route path="/login" exact component={SigninForm} />
                    </Switch>
            )
        }
    }

}

// App.js
    <Router history={history}>
      <div className="App">
        <header>
          <h3>This is header!</h3>
        </header>
        <Switch>
          <AppRouter />
          <Route path="/login" component={SigninForm} />
        </Switch>
      </div>
    </Router>

1. 调用 graphql 查询，根据存储在 localStorage 中的授权令牌检索当前用户。
2. 如果出错，将重定向到 /login
3. 如果成功，将创建可用于该特定角色的特定路由。 3a。如果角色是用户，它将创建一个具有 EmployeeHome 组件的路由 3b。如果角色是管理员，它将创建一个具有 AdminHome 组件的路由

尝试上面的代码后，它没有加载指向/login路由的SigninForm。

应该做些什么来完成这项工作？

已添加：Replicable Codesandbox

Answer 1

没有必要在AppRouter 组件中使用Switch，除非它具有“嵌套”路由。此外，无需多次定义/login 路由。

<Router history={history}>
  // ... header here
  <Switch>
    <Route exact path="/login" component={SigninForm} />
    <AppRouter />
  </Switch>
</Router>

AppRouter 在哪里：

const AppRouter = () => {
  // define loading, error, role etc. 

  if (loading) return <span>Loading...</span>
  if (error) return <Redirect to="/login" />

  if (role === 'user') {
    return (
      <>
        <Route exact path="/" component={EmployeeHome} />
      </>
    )
  } else {
    return (
      <>
        <Route exact path="/" component={AdminHome} />
      </>
    )
  }
}

而且，<Redirect to="/login" /> 不应该是路由器设置的第一行，因为它会继续重定向到“/login”，而不会看到进一步定义的路由，因此不会呈现任何内容。当出现错误时，您在AppRouter 中的当前设置会返回<Redirect to="/login" />，在这种情况下，它会成为有问题的第一行。

不过，你可以这样写：<Redirect exact from="/" to="/login" />。