反应 PrivateRoute 授权路线

Question

我正在开发一个基本的 react auth 应用程序，现在当我使用包含 firebase auth 变量的.env.local文件运行此 repo 时，路由 /signup 和 /login 工作。 https://github.com/MartinBarker/react-auth-app

我正在尝试使指向仪表板的“/”路由只能由当前登录的用户访问，如果用户未登录但尝试访问“/”路由，他们将重定向到“/登录”页面。

但是每当我使用路线时

<PrivateRoute exact path="/" element={Dashboard} /> 

我的 chrome devtools 控制台显示一个包含错误消息的空白页面：

index.tsx:24 Uncaught Error: [PrivateRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

我的 PrivateRoute.js 看起来像这样：

// This is used to determine if a user is authenticated and
// if they are allowed to visit the page they navigated to.

// If they are: they proceed to the page
// If not: they are redirected to the login page.
import React from 'react'
import { Navigate, Route } from 'react-router-dom'
import { useAuth } from '../Contexts/AuthContext'

const PrivateRoute = ({ component: Component, ...rest }) => {

  // Add your own authentication on the below line.
  //const isLoggedIn = AuthService.isLoggedIn()

  const { currentUser } = useAuth()
  console.log('PrivateRoute currentUser = ', currentUser)

  return (
    <Route
      {...rest}
      render={props =>
        currentUser ? (
          <Component {...props} />
        ) : (
          //redirect to /login if user is not signed in
          <Navigate to={{ pathname: '/login'}} />
        )
      }
    />
  )
}

export default PrivateRoute

我不确定为什么会发生此错误，感谢您的帮助

Answer 1

这种行为似乎在 ReactRouter V6 中发生了变化，这是我们为一个项目提出的解决方案。

私人路线*重新创建用户问题代码

import React from 'react'
import { Navigate, Route } from 'react-router-dom'
import { useAuth } from '../Contexts/AuthContext'

const PrivateRoute = ({ children }) => {

  // Add your own authentication on the below line.
  //const isLoggedIn = AuthService.isLoggedIn()

  const { currentUser } = useAuth()
  console.log('PrivateRoute currentUser = ', currentUser)

  return (
    <>
      {
      currentUser ? (
          children
        ) : (
          //redirect to /login if user is not signed in
          <Navigate to={{ pathname: '/login'}} />
        )
      }
    </>
  )
}

export default PrivateRoute

Typescript *我们这个问题的实际代码实现

const PrivateRoute: React.FC = ({ children }) => {
  const navigate = useNavigate();
  const { isAuthenticated, isAuthLoading } = useAuth();
  const { user, isLoadingUser } = useContext(UserContext);

  // Handle users which are not authenticated
  // For example redirect users to different page

  // Show loader if token is still being retrieved
  if (isAuthLoading || isLoadingUser) {
    // TODO: show full page loader
    return (
      <div>Loading...</div>
    );
  }

  // Proceed with render if user is authenticated
  return (
    <>
      {children}
    </>
  );
};

路由器

<Router>
  <Routes>
    <Route
      path={routes.user.accountSignup.path}
      element={
        <PrivateRoute>
          <AccountSignup />
        </PrivateRoute>
      }
    />
  </Routes>
</Router>