未定义的typeError：无法读取未定义的属性（Reading＆＃x27; PathName＆＃x27;），使用函数重定向页面时显示了此错误

Question

此代码正在使用If-and条件，如果用户被签名或仅登录，则他可以留在浏览页面中，否则他将被发送到登录页面等。

import React from 'react';
import { Route } from 'react-router-dom';
import {Navigate} from "react-router";




export function IsUserRedirect({ user, loggedInPath, children, ...rest }) {
  return (
    <Route
      {...rest}
      render={() => {
        if (!user) {
          return children;
        }

        if (user) {
          return (
            <Navigate
              to={{
                pathname: loggedInPath,
              }}
            />
          );
        }

        return null;
      }}
    />
  );
}

export function ProtectedRoute({ user, children, ...rest }) {
  return (
    <Route
      {...rest}
      render={({ location }) => {
        if (user) {
          return children;
        }

        if (!user) {
          return (
            <Navigate
              to={{
                pathname: 'signin',
                state: { from: location },
              }}
            />
          );
        }

        return null;
      }}
    />
  );
}

调用上述函数：，但正在显示errror {und off typeerror {und offfict typeError：无法读取不确定的属性（读取'pathName'pathName''pathName'' ）}

import React from 'react';
import { BrowserRouter, Router, Routes, Route } from 'react-router-dom';
import { Home, Browse } from './pages';
import * as ROUTES from './constants/routes';
import { IsUserRedirect, ProtectedRoute } from './helpers/routes';
import { useAuthListener } from './hooks';
import SignIn from "./pages/signin";
import SignUp from "./pages/signup";

export function App() {
  const { user } = useAuthListener();

  return (
    <Router>
      <Routes>
        <IsUserRedirect user={user} loggedInPath={ROUTES.BROWSE} path={ROUTES.SIGNIN}>
          <SignIn />
        </IsUserRedirect>
        <IsUserRedirect user={user} loggedInPath={ROUTES.BROWSE} path={ROUTES.SIGNUP}>
          <SignUp />
        </IsUserRedirect>
        <ProtectedRoute user={user} path={ROUTES.BROWSE}>
          <Browse />
        </ProtectedRoute>
        <IsUserRedirect user={user} loggedInPath={ROUTES.BROWSE} path={ROUTES.HOME}>
          <Home />
        </IsUserRedirect>
      </Routes>
    </Router>
  );
}

[在此处输入图像描述] [2]

Answer 1

它解决了

import React from 'react';
import { BrowserRouter, Router, Route } from 'react-router-dom';
import { Home, Browse } from './pages';
import * as ROUTES from './constants/routes';
import { IsUserRedirect, ProtectedRoute } from './helpers/routes';
import { useAuthListener } from './hooks';
import SignIn from "./pages/signin";
import SignUp from "./pages/signup";
import {Routes, useRoutes} from "react-router";

export function App() {
  const { user } = useAuthListener();

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/browse" element = {
            <ProtectedRoute>
              <Browse />
            </ProtectedRoute>} />
           <Route path="/signup" element = {
             <IsUserRedirect>
              <SignUp />
             </IsUserRedirect>} />
            <Route path="/signin" element = {
             <IsUserRedirect>
              <SignIn />
             </IsUserRedirect>} />
             <Route path="/home" element = {
             <IsUserRedirect>
              <Home />
             </IsUserRedirect>} />





      </Routes>
    </BrowserRouter>
  );
}

import React from 'react';

import {Navigate} from "react-router";
import {useAuthListener} from "../hooks";

export function ProtectedRoute({children}) {
  const auth =useAuthListener();
  return auth ? children : <Navigate to="/signin" />;


}

export function IsUserRedirect({ loggedInPath,children }) {
   const auth =useAuthListener();
  return auth ? children : <Navigate to="/browse" />;
}