反应 - 反应路由器 v6- privateRoute - 无限循环或不渲染

Question

对于这个看似重复的问题表示歉意，但它确实让我很痛苦。我正在尝试使用新的 ReactRouter v6 私有路由，我认为对我来说最好的做法是调用服务器以确保令牌有效且未被撤销。我被无限循环输入私有路由并出现典型错误

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

我的私有路由看起来像这样：

import React, {useCallback, useEffect, useState} from "react"
import {Outlet, Navigate} from "react-router-dom"
import {Auth} from "../../api/authApi"


const  PrivateRoute = () => {
  const [auth, setAuth] = useState(false)

  const checkAuth = useCallback(() => {
    let authApi = new Auth()
    authApi.isAuth().then(isAuthorized => (
      setAuth(isAuthorized)
    ))
  }, [])

  useEffect(() => {
    checkAuth()
  }, [checkAuth])

  return auth ? <Outlet /> : <Navigate to="/login" />;
}

export default PrivateRoute

我的路由是：

function App() {

  return (
     <HashRouter>
       <Routes>
         <Route exact path="/login" element={<LoginPage />} />
         <Route exact path="/register" element={<RegisterPage />} />
         <Route path="/" element={
           <PrivateRoute><HomePage /></PrivateRoute>
         } />
       </Routes>
     </HashRouter>
  )
}

export default App

我将 PrivateRoute 组件更改为这样：

import React, {useEffect, useRef} from "react"
import {Outlet, Navigate} from "react-router-dom"
import {Auth} from "../../api/authApi"


const  PrivateRoute = () => {
  let auth = useRef(false)

  useEffect(() => {
    const checkAuth = () => {
      let authApi = new Auth()
      authApi.isAuth().then(isAuthorized => (
        auth.current = isAuthorized
      ))
    }
    checkAuth()
  }, [])

  return (auth.current ? <Outlet /> : <Navigate to="/login" />)
}

export default PrivateRoute

但仍然有相同的问题。是我缺少什么吗？

Answer 1

我尝试了一下，发现两个问题：

1. 初始状态auth为false，所以它会第一次导航到/login并卸载PrivateRoute，然后组件 PrivateRoute（已卸载）获得 api 响应，我想也许这就是您收到警告的原因。 （我在底部做了一个解决方案）
2. Route 和 Outlet 组件的使用方式是错误的。

         <Route path="/" element={
           <PrivateRoute><HomePage /></PrivateRoute>
         } />

应修改为

        <Route element={<PrivateRoute />}>
          <Route path="/" element={<Home />} />
        </Route>

代码示例：