Complete Guide to using react router V6 for authentication

Hua Weiyun 2022-05-14 11:32:37 阅读数:981

completeguideusingreactrouter

React Router v6 yes React A popular and powerful routing library for applications . It provides a kind of declarative 、 Component based routing method , and Can deal with URL Parameters 、 Common tasks such as redirecting and loading data .

This latest version of React Router Introduced many new concepts , such as <Outlet /> and layout Layout routing , But there are still few relevant documents .

This article will show you how to use React Router v6 Create protected routes and how to add Authentication .

Start

Open the terminal , Run the following command to create a new React project :

> npx create-react-app ReactRouterAuthDemo> cd ReactRouterAuthDemo

Next , stay React Install... In the application React Router As a dependency :

> npm install react-router-dom

once React Router Dependencies installed , We can start editing src/index.js file .

First , from react-router-dom Import BrowserRouter Components , And then use <BrowserRouter /> The parcel <App /> Components , Just like this. :

import { StrictMode } from "react";import { createRoot } from "react-dom/client";import { BrowserRouter } from "react-router-dom";import App from "./App";const rootElement = document.getElementById("root");const root = createRoot(rootElement);root.render( <StrictMode> <BrowserRouter> <App /> </BrowserRouter> </StrictMode>);

Basic routing

React Router Provides <Routes /> and <Route /> Components , Enables us to render components based on their current location .

import { Routes, Route } from "react-router-dom";import { LoginPage } from "./pages/Login";import { HomePage } from "./pages/Home";import "./styles.css";export default function App() { return ( <Routes> <Route path="/" element={<HomePage />} /> <Route path="/login" element={<LoginPage />} /> </Routes> );}

<Route />

<Route /> Provides applications and React Mapping of paths between components . for example , When the user navigates to /login when , To render LoginPage Components , We just need to provide... Like this <Route />:

<Route path="/login" element={<LoginPage />} />

<Route /> A component can be seen as a if sentence , Only if the element matches the specified path , It will act on URL The location of .

<Routes />

<Routes /> Components are React Router v5 Medium <Switch /> Replacement of components .

We can create Login.jsx and Home.jsx To use <Routes />

// Login.jsxexport const LoginPage = () => ( <div> <h1>This is the Login Page</h1> </div>);// Home.jsxexport const HomePage = () => ( <div> <h1>This is the Home Page</h1> </div>);

Next , We will run the following command to start the application :

> npm run start

In the browser , We will see by default Home Components . If we use /login route , We will see LoginPage Components appear on the screen .

perhaps , We can also use an ordinary JavaScript object , adopt useRoutes Hooks to represent routes in the application . This is a functional method of defining routing , It works in the same way as < routes /> and <Route /> The components are the same .

import { useRoutes } from "react-router-dom";// ...export default function App() { const routes = useRoutes([ { path: "/", element: <HomePage /> }, { path: "/login", element: <LoginPage /> } ]); return routes;}

Now that the basic setup has been completed , Let's see how to create a protected route , This prevents unauthenticated users from accessing some content in the application .

Create a protected route

Before creating a protected route , Let's first create a custom hook , It will use Context API and useContext The hook handles the status of authenticated users .

import { createContext, useContext, useMemo } from "react";import { useNavigate } from "react-router-dom";import { useLocalStorage } from "./useLocalStorage";const AuthContext = createContext();export const AuthProvider = ({ children }) => { const [user, setUser] = useLocalStorage("user", null); const navigate = useNavigate(); // When verifying user permissions , Access this function  const login = async (data) => { setUser(data); navigate("/profile"); }; // Log out  const logout = () => { setUser(null); navigate("/", { replace: true }); }; const value = useMemo( () => ({ user, login, logout }), [user] ); return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;};export const useAuth = () => { return useContext(AuthContext);};

Above useAuth In the hook , We exposed the user's state and some methods for user login and logout . When the user logs out , We use React Router Of useNavigate Hook them Redirect Go to the home page .

In order to keep the user's state when the page is refreshed , We will use useLocalStorage hook , It will synchronize the status values in the browser's local storage .

import { useState } from "react";export const useLocalStorage = (keyName, defaultValue) => { const [storedValue, setStoredValue] = useState(() => { try { const value = window.localStorage.getItem(keyName); if (value) { return JSON.parse(value); } else { window.localStorage.setItem(keyName, JSON.stringify(defaultValue)); return defaultValue; } } catch (err) { return defaultValue; } }); const setValue = (newValue) => { try { window.localStorage.setItem(keyName, JSON.stringify(newValue)); } catch (err) {} setStoredValue(newValue); }; return [storedValue, setValue];};

<ProtectedRoute /> Components will be from useAuth Check the status of the current user in the hook , If the user is not authenticated , Redirect to / route .

import { Navigate } from "react-router-dom";import { useAuth } from "../hooks/useAuth";export const ProtectedRoute = ({ children }) => { const { user } = useAuth(); if (!user) { // user is not authenticated return <Navigate to="/" />; } return children;};

To redirect users , We use <Navigate /> Components . When the parent component renders the current location ,<Navigate /> The component will change the current position . It is used internally usenavate hook .

stay App.js In file , We can use <ProtectedRoute /> Package of components page Components . For example, the following , We use <ProtectedRoute /> packing <SettingsPage /> and <ProfilePage /> Components . Now? , When an unauthenticated user attempts to access /profile or /settings When the path , They will be redirected to the home page .

import { Routes, Route } from "react-router-dom";import { LoginPage } from "./pages/Login";import { HomePage } from "./pages/Home";import { SignUpPage } from "./pages/SignUp";import { ProfilePage } from "./pages/Profile";import { SettingsPage } from "./pages/Settings";import { ProtectedRoute } from "./components/ProtectedRoute";export default function App() { return ( <Routes> <Route path="/" element={<HomePage />} /> <Route path="/login" element={<LoginPage />} /> <Route path="/register" element={<SignUpPage />} /> <Route path="/profile" element={ <ProtectedRoute> <ProfilePage /> </ProtectedRoute> } /> <Route path="/settings" element={ <ProtectedRoute> <SettingsPage /> </ProtectedRoute> } /> </Routes> );}

If the number of protected routes is limited , The above method works well , But if there are multiple such routes , We have to pack everything , It's complicated .

contrary , We can use React Router v6 Of Nested routing feature , Encapsulate all protected routes in one layout .

Use nested routing and < Outlet />

React Router v6 in One of the most powerful features is nested routing . This feature allows us to have a A route that contains other sub routes . Most of our layouts are similar to URL The fragments on the are coupled ,React Router I fully support this .

for example , We can do it in <HomePage /> and <LoginPage /> Add a parent component to the route <Route />, Just like this. :

import { ProtectedLayout } from "./components/ProtectedLayout";import { HomeLayout } from "./components/HomeLayout";// ...export default function App() { return ( <Routes> <Route element={<HomeLayout />}> <Route path="/" element={<HomePage />} /> <Route path="/login" element={<LoginPage />} /> </Route> <Route path="/dashboard" element={<ProtectedLayout />}> <Route path="profile" element={<ProfilePage />} /> <Route path="settings" element={<SettingsPage />} /> </Route> </Routes> );}

Parent component <Route /> There can also be a path , It is responsible for rendering sub components on the screen <Route />.

When the user navigates to /dashboard/profile when , The router will present <ProfilePage />. To achieve this , The parent routing element must have a <Outlet /> Component to render child elements .Outlet Components make nested UI Visible when rendering sub routes .

The parent routing element can also have additional common business logic and user interface . for example , stay <ProtectedLayout /> In the component , We have included private routing logic and a common navigation bar , When the sub route is rendered , It will be visible .

import { Navigate, Outlet } from "react-router-dom";import { useAuth } from "../hooks/useAuth";export const ProtectedLayout = () => { const { user } = useAuth(); if (!user) { return <Navigate to="/" />; } return ( <div> <nav> <Link to="/settings">Settings</Link> <Link to="/profile">Profile</Link> </nav> <Outlet /> </div> )};

except <Outlet /> Components , We can also choose to use useOutlet hook , It works the same way :

import { Link, Navigate, useOutlet } from "react-router-dom";// ...export const ProtectedLayout = () => { const { user } = useAuth(); const outlet = useOutlet(); if (!user) { return <Navigate to="/" />; } return ( <div> <nav> <Link to="/settings">Settings</Link> <Link to="/profile">Profile</Link> </nav> {outlet} </div> );};

Similar to protected routes , We don't want authenticated users to access /login route . Let us in <HomeLayout /> Process it in the component :

import { Navigate, Outlet } from "react-router-dom";import { useAuth } from "../hooks/useAuth";export const HomeLayout = () => { const { user } = useAuth(); if (user) { return <Navigate to="/dashboard/profile" />; } return ( <div> <nav> <Link to="/">Home</Link> <Link to="/login">Login</Link> </nav> <Outlet /> </div> )};

ending

It's worth taking some time to better understand React Router v6 How it works , Especially user authentication .

Compared to previous versions ,React Router v6 It's a huge improvement . It's fast 、 Stable 、 reliable . In addition to being easier to use , There are many new features , such as <Outlets /> And an improved <Route /> Components , This greatly simplifies React Routing in applications .

I hope this guide will help you , I hope you have a good understanding of how to use React Router v6 Better understanding of handling user authentication .

版权声明:本文为[Hua Weiyun]所创,转载请带上原文链接,感谢。 https://qdmana.com/2022/134/202205141131101369.html