我想在 React 中为两个仪表板使用单一路由

Question

在这里，我要做的是制作带有 2 个仪表板的 React App。第一，如果 kyc_status 是 true 那么 React 应用应该显示 <Home2> 第二，如果 kyc_status 是 false 那么<Dashboard> 登录后。

使用 refresh_token api。我将 kyc_status 的值存储在状态 (kyc) 中并使用条件渲染，我正在检查反应应用程序应该采用哪条路线。

但它首先降落在 <Dashboard>，然后在 <Home2> 重新路由以防万一 kyc_status 为真。我不知道它在优先 <Dashboard>.

Code Image

const DashboardLayout = () => {
  let navigate = useNavigate();
  const [kyc, setKyc] = useState();

  async function getUser() {
    getDataAPI("user/refresh_token").then(function (token) {
      if (token.data.accesstoken) {
        getDataAPI(`get_user/${token.data.user._id}`).then((res) =>
          setKyc(res.data.kyc_status)
        );
      }
    });
  }
  useEffect(() => {
    getDataAPI("user/refresh_token").then(function (res) {
      if (res.data.status == 0) {
        console.log(res.data.status);
        navigate("/login");
      }
    });

    getUser();
  }, []);
  return (
    <Fragment>
      <Header />
      <Routes>
        {kyc ? (
          <Route exact path="/" element={<Home2 />}></Route>
        ) : (
          <Route exact path="/" element={<Dashboard />}></Route>
        )}
      </Routes>
    </Fragment>
  );
};

export default DashboardLayout;

Answer 1

您可以做的一件事是首先将 kyc 设置为未定义，然后在加载时显示您想要显示的任何仪表板。

像这样：

const [kyc, setKyc] = useState(undefined);
...

{kyc === undefined ? (
    //Display some loading screen here
) : (
    <Route exact path="/" element={kyc ? <Home2 /> : <Dashboard />} />
)}

我想在 React 中为两个仪表板使用单一路由

I want to use single route for two dashboard in React

reactjs

react-router

conditional-rendering