当前位置：首页 > 文章列表 > 文章 > 前端 > 了解具有正确路由的 React Outlet

了解具有正确路由的 React Outlet

来源：dev.to 2024-10-26 17:27:48 0浏览收藏

大家好，今天本人给大家带来文章《了解具有正确路由的 React Outlet》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

本文将探讨 react 出口的功能以及 react 应用程序中的路由基础知识。首先也是最重要的，我们需要了解路由的基础知识

了解基础知识

在深入研究之前，让我们确保我们对 react router 有深入的了解。

什么是 react router？ react router 是一个流行的 javascript 库，可以在 react 应用程序中的不同视图之间进行导航。它允许您定义路由，将 url 映射到特定组件。更多..
为什么路由很重要？路由对于构建单页应用程序 (spa) 至关重要，用户无需重新加载整页即可导航，从而创建更流畅、更动态的体验。

现在让我们深入了解 react outlet

什么是 react outlet？

组件是父路由组件中的占位符，它告诉 react router 在哪里渲染子路由。它就像一个动态容器，根据当前 url 更改其内容。
此功能有助于管理复杂的布局，其中页面的一部分保持一致，例如标题或侧边栏，而其他部分则根据路线动态变化。

它是如何工作的：当 url 与父路由匹配时，react router 会在该父组件中查找。然后它将匹配的子路由的组件渲染到中。

让我们为 react 应用程序使用正确的 react 路由来实现 outlet

import react from "react";

// import components
import allroutes from "./routes";

// component
const app = () => {
  return (
    <>

      
    
  );
};
export default app;

这个allroutes组件使用react-router-dom为react应用程序定义了一个路由系统，它处理react web应用程序中不同页面之间的导航。这是代码的详细分解

// import packages

import { browserrouter, outlet, route, routes } from "react-router-dom";
import react, { suspense, lazy } from "react";
import {
  dashboard,
  homepath,
  loginpath,
  rootpath
} from "./routepaths";

import loader from "../components/loader";
import protectedroute from "./protectedroute";

// import route paths

const logincomponent = lazy(() => import("../pages/login"));
const homecomponent = lazy(() => import("../pages/home"));
const routenotfoundcomponent = lazy(() => import("../pages/pagenotfound"));

const dashboardcomponent = lazy(() => import("../pages/dashboard/"));

const allroutescomponent = () => {
  return (
    }>
      
        
          }>
            } />
            } />
            }>
              } />
              } />
            
            } />
          
        
      
    
  );
};

export default allroutescomponent;

导入包

browserrouter：该组件支持在浏览器中进行路由。它使用 html5 历史 api 来保持 ui 与 url 同步。
outlet、route、routes：这些组件定义和处理应用程序中的各种路由（或页面）。
suspense：suspense 用于处理延迟加载的组件。它在加载组件时显示后备组件（在本例中为自定义加载器）。
惰性：此函数仅在需要时才延迟加载组件，从而实现代码分割，通过减少初始包大小来提高应用程序的性能。
加载器：这是一个自定义组件，在延迟加载组件时显示加载指示器。
protectedroute：此自定义组件可确保某些路由只能由授权用户访问，从而增强安全性。
根路由（/）：该路由用于我们应用程序的根路径。它呈现登录组件。

导入路线

应用程序从单独的文件 (routepaths) 导入预定义路径（例如仪表板、homepath、loginpath、rootpath）。这使得代码更容易维护，并避免在组件内硬编码路由路径。

在 allroutescomponent 中定义路由

主函数 allroutescomponent 定义了如何处理应用程序中的不同路由：
：包装路由结构并管理浏览器导航。
：该组件保存应用程序的所有定义的路由。
：定义单个路由。 path 属性定义 url 模式，element 属性指定要为该路由渲染的组件。

根 (rootpath) 路由充当子路由的容器。
当用户访问 / 路径时，索引路由默认渲染 logincomponent。
/login 路径也会渲染 logincomponent。
像 /home 和 /dashboard 这样的路由被包装在 protectedroute 组件中，确保只有授权用户才能访问这些页面。

：这允许渲染嵌套路由。任何子路由（如 /login、/home）都会在父路由 (rootpath) 内呈现。

受保护的路线有哪些？

一些路由（如 homepath 和仪表板）嵌套在 protectedroute 元素内。这意味着用户必须满足某些条件（例如登录）才能访问这些页面。如果用户未经授权，protectedroute 组件通常会将其重定向到登录页面或错误页面。
这是受保护路线的代码

// import packages
import react, { useeffect } from "react";
import { usenavigate, outlet } from "react-router-dom";

import baselayout from "../pages/layout";

// import route paths
import { rootpath } from "./routepaths";

// component
const protectedroute = () => {
  const navigate = usenavigate();();
  const isauthenticated = false; //add a dynamic method call
  const user = 'shruti';//add a dynamic method call

  useeffect(() => {
    if (!isauthenticated) {
      return navigate(rootpath, { replace: true });
    }
  }, [isauthenticated, navigate]);

  return (
    
      
    
  );
};

export default protectedroute;

代码说明

导入包

react, { useeffect }：react 是构建 ui 的核心包，useeffect 是在功能组件中运行副作用的钩子。这里，useeffect 用于处理用户未通过身份验证时的重定向。
usenavigate：react-router-dom 中的这个钩子可以实现编程导航。它用于在用户未经身份验证时重定向用户。
outlet：这是受保护路由内嵌套路由的占位符。它允许动态渲染子路由。
baselayout：该组件用布局包装受保护的路由，为受保护的页面提供一致的外观和结构。

组件定义

usenavigate()：这个钩子允许导航到不同的路线。在本例中，如果用户未经过身份验证，它用于导航到 rootpath。
isauthenticated 和 user：这些值目前是硬编码的，但可以动态设置，通常通过从全局状态或上下文检查某些身份验证状态（如 jwt 令牌、会话数据等）。
isauthenticated：确定用户是否通过身份验证的标志。如果为 false，则用户将被重定向。
user：当前登录的用户。该值可以从上下文或全局状态动态检索，但目前，它是一个硬编码字符串（'shruti'）。

useeffect：只要经过身份验证或导航更改，useeffect 挂钩就会运行。
在 useeffect 内部，代码检查用户是否经过身份验证。如果没有（！已通过身份验证），则使用导航功能将用户重定向到根路径。
{ replace: true } 选项可防止将重定向添加到浏览器的历史记录中，这意味着用户将无法导航回受保护的页面。

现在让我们深入了解 baselayout 组件代码

import React, { lazy } from "react";

import ErrorBoundary from "../../components/error-boundary";

// const Header = lazy(() => import("@components/header"));
const Sidebar = lazy(() => import("../../components/sidebar"));
export default function BaseLayout(props) {
  const { children } = props;
  // common things we need to show on each page like Header,sidebar ,Footer
  return (
    
      
        
          
          
            {/*  */}
            {children}//components from all routes
          
        
      
    
  );
}

BaseLayout.defaultProps = {
  children: [],
  user: {},

baselayout 组件充当我们应用程序中所有页面的通用布局结构。
它包含侧边栏和主要内容区域等常见元素。
来自不同路由的子组件使用主内容区域内的 outlet 组件进行渲染。

试试这篇文章，用routeroutlet实现延迟加载路由

结论

react 中使用 outlet 进行延迟加载路由是通过减少应用程序的初始加载时间来优化性能的强大方法。通过使用 react.lazy() 和 suspense，您可以确保仅在需要时加载组件，而 outlet 组件则允许高效的嵌套路由。与受保护路由的使用相结合，此方法提供了一个模块化、可扩展且性能友好的结构，用于管理应用程序中的路由。