React.js 根据角色向用户显示不同页面的最佳技术是什么

Question

有一两秒钟错误的页面出现在屏幕上，直到请求为我提供用户角色，以便我可以向他显示正确的页面。我怎样才能从一开始就向他们展示正确的页面

Answer 1

最好的处理角色的方法是 App.js 文件，因为你所有的路线都在那里，然后你可以根据他们 roles.like 这个例子指定哪条路线可用：

// App.js 
function App() {
const [addUserManagment, setAddUserManagment] = useState({
   render: false,
   type: "",
});
useEffect(() => {
   const space = localStorage.getItem("space");
   if (space === "c" || space === "a") {
   setAddUserManagment({
      render: true,
      type: space,
   });
  }
}, []);
  return (
<div className="App">
  <Routes>
    <Route path="/">
      <Route index element={<Login />} />
      <Route path="forget-password" element={<ForgetPassword />} />
      <Route path="reset-password/:token" element={<RestPassword />} />
      <Route
        path="register/:campanyName/:companyId"
        element={<InviteRegister />}
      />
    </Route>
          <Route path="profile" element={<Profile />} />
      {addUserManagment.render && (
        <Route path="setting" element={<Setting />} />
      )}
      {addUserManagment.render && (
        <Route
          path="user-management"
          element={
            addUserManagment.type === "c" ? <UserList /> : <UserListAdmin />
          }
        />
      )}
    </Route>
   </Routes>
  )
}

现在，如果用户类型等于 c 或 a，则会呈现 settign 和 user-managment。

React.js 根据角色向用户显示不同页面的最佳技术是什么

React.js what is the best technique to show to the user different pages according to there role

javascript

reactjs

web