如何在反应路由器v6上使用v6钩子？

Question

我是一个初学者，我目前正在开发一个应用程序使用一个反应模板。模板使用React路由器v6作为带有use Routes()钩子的路由器。应用程序的每个路由都受到保护，只有通过登录才能访问。

我计划使用use Context()钩子实现登录，但我似乎不知道如何在Provider标记中包装这些路由。

我的两个疑问是：

1. 如何将我的路由包装在<Context Provider>标记
2. 中，如果我将所有路由包装在这样的应用程序中。

Answer 1

首先，您将需要上下文。我总是喜欢写钩子：

import { createContext, useContext, useState } from "react";

const AuthContext = createContext({
    isAuthenticated: false,
    login: () => {},
    logout: () => {}
});

export function AuthProvider({ children }){

    const [isAuthenticated, setAuthenticated] = useState(false);

    const login = () => {
        setAuthenticated(true);
    }
    const logout = () => {
        setAuthenticated(false);
    }
    return (
        <AuthContext.Provider value={{isAuthenticated: isAuthenticated, login: login, logout: logout}}>
            {children}
        </AuthContext.Provider>
    )
}

export default function AuthConsumer() {
    return useContext(AuthContext); 
}

然后，您将需要这样的私有路由组件：

import React from 'react';
import { Navigate } from 'react-router-dom';
import useAuth from "./useAuth";

function RequireAuth({ children, redirectTo }) {
    const { isAuthenticated } = useAuth();
    return isAuthenticated ? children : <Navigate to={redirectTo} />;
}

export default RequireAuth;

最后，您将混合在您的路线：

import React from 'react';
import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
import Login from './pages/Login';
import RequireAuth from './components/PrivateRoute';
import useAuth from "./components/useAuth";

const Home = () => <div><h1>Welcome home</h1></div>
const Dashboard = () => <h1>Dashboard (Private)</h1>;

function App() {

  const { isAuthenticated } = useAuth();

  return (
    <BrowserRouter>
      <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/dashboard" element={
              <RequireAuth redirectTo="/login">
                <Dashboard />
              </RequireAuth>
            }>
          </Route>
          <Route path="/login" element={<Login />} />
          <Route path='*' element={<Navigate to={isAuthenticated ? '/dashboard' : '/'} />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

我希望这能帮上忙。