reactjs - Ako používať chránené trasy s react-router-dom V6 a typescript?

Snažím sa implementovať chránenú trasu, ktorá umožní prístup k mojej aplikácii iba prihláseným používateľom. Zdá sa, že kód, ktorý som napísal, funguje - keď sa pokúsim pristúpiť na domovskú stránku bez prihlásenia, som presmerovaný na prihlasovaciu stránku. Avšak, keď som prihlásený, môžem stránku otvoriť, ale nezobrazí sa a dostanem nasledujúcu chybu: Kliknite sem pre chybu

Vyskúšal som viacero metód a obalenie prvku vo mojej chránenej ceste sa zdá byť spôsobom, akým sa to robí vo verzii V6, avšak zdá sa, že mi to nefunguje:

Moja chránená trasa

interface PrivateRouteProps extends RouteProps {
}

const PrivateRoute: React.FC<PrivateRouteProps> = ({...rest}) => {
    const auth = useAuth();

    if (auth?.user === null) {
        return <Navigate to='/'/>;
    }
    return <Route {...rest}/>;
};

export default PrivateRoute;

Moja aplikácia (použitie trasy)

function App() {
    useEffect(() => {
      API
        .get('api', '/reservation', {})
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error.response);
        });

    }, [])
    return (
      <Router>
        <Routes>
          <Route path='/' element={<LoginPage />}/>
          <Route path='/consultAndReserve' element={<PrivateRoute><Navbar/><ConsultReserve/></PrivateRoute>} />
          <Route path='/consultAndReserve/:date' element={<><Navbar/><ConsultReserveWithDate/></>}/>
          <Route path='/myReservations'  element={<><Navbar/><Reservations/></>}/>
          <Route path='/tracing'  element={<><Navbar/><Tracing/></>}/>
        </Routes>
      </Router>
  );
}

Čo robím zle?

Odpoveď č. 1

Je pomerne jednoduché vytvoriť komponent "PrivateRoute", dokonca aj v TypeScripte.

Vo vašom prípade nemôžete priamo renderovať komponent Route, ako chyba poukazuje. Toto bola zásadná zmena medzi RRDv5 a RRDv6. Môžete renderovať vlastnosť children, pretože priamo obalujete komponenty, ktoré chcete chrániť.

Príklad :

const PrivateWrapper = ({ children }: { children: JSX.Element }) => {
  const auth = useAuth();
  return auth?.user ? children : <Navigate to="/" replace />;
};

Použitie :

<Routes>
  ...
  <Route
    path="/consoleAndReserve"
    element={(
      <PrivateWrapper>
        <Navbar />
        <ConsultReserve />
      </PrivateWrapper>
    )}
  />
  ...
</Routes>

Súvisiace články