如何在 React 应用程序中处理私有路由

Question

我的私人路由设置遇到问题。目前，我使用 App.js 中的用户变量来确定用户是否登录，以限制对私有路由的访问。这种方法的问题是，如果用户试图直接访问私有页面（例如“mysolutions”），由于在初始网站加载期间从数据库中获取用户数据的延迟，他们将立即被重定向到主页.

我想知道如何解决这个问题。

我的 App.js 代码：

import React, { Suspense } from "react"
import { Navigate, Route, Routes } from "react-router-dom"
import rocketLoader from "./assets/animated_illustrations/rocketLoader.json"
import Layout from "./components/layouts/Layout"
import Meta from "./components/meta/Meta"
import LottieAnimation from "./components/reusable/LottieAnimation"
import ScrollToTop from "./components/reusable/ScrollToTop"
import { useAuthContext } from "./hooks/useAuthContext"

import "./App.css"

// lazy loading components
const Homepage = React.lazy(() => import("./pages/Homepage"))
const Dashboard = React.lazy(() => import("./pages/Dashboard"))
const MySolutions = React.lazy(() => import("./pages/MySolutions"))

const App = () => {
  const { authIsReady, user } = useAuthContext()
  return (
    <>
      <Meta routes={routes} />
        <div>
          <Suspense
            fallback={
              <div className="flex justify-center items-center min-h-screen">
                <LottieAnimation animationDataFile={rocketLoader} />
              </div>
            }
          >
            <ScrollToTop>
              <Routes>
                <Route path="/" element={<Layout />}>
                  <Route index element={<Homepage />} />
                  <Route path="challenges" element={<Dashboard />} />
                  <Route
                    path="mysolutions"
                    element={user ? <MySolutions /> : <Navigate to="/" />}
                  />
                  <Route path="*" element={<Navigate to="/" replace />} />
                </Route>
              </Routes>
            </ScrollToTop>
          </Suspense>
        </div>
    </>
  )
}

export default App

Answer 1

我会创建一个加载页面，在获取完成之前向用户显示该页面，我们可以决定是否允许前进到私有路由。这个解决方案对你有用吗？