首页 > 其他分享 >React路由配置参考(记录)

React路由配置参考(记录)

时间:2024-09-10 14:52:16浏览次数:12  
标签:登录 参考 React AuthLayout import BasicLayout 路由 页面

整体:

  1. 登录页单独处理:将登录页单独处理,路径为 /login
  2. 使用 AuthLayout 处理授权页面AuthLayout 可以作为一个高阶组件,确保用户登录后才能访问系统中的其他页面。
  3. 加载主布局 BasicLayoutBasicLayout 可以用来加载系统的主布局,并通过 routesRender(routesConfig) 渲染配置文件中的子路由。
// AuthLayout.js
import { Navigate, Outlet } from 'react-router-dom';

const AuthLayout = () => {
  const isLoggedIn = localStorage.getItem('isLoggedIn'); // 通过localStorage检查是否登录

  if (!isLoggedIn) {
    return <Navigate to="/login" replace />; // 未登录,重定向到登录页面
  }

  return (
    <div>
      {/* 渲染子路由 */}
      <Outlet />
    </div>
  );
};

export default AuthLayout;
// BasicLayout.js
import React from 'react';
import { Outlet } from 'react-router-dom';

const BasicLayout = () => {
  return (
    <div>
      {/* 这里可以放导航栏或侧边栏 */}
      <h1>系统主界面</h1>
      <Outlet /> {/* 渲染子路由 */}
    </div>
  );
};

export default BasicLayout;

下面是路由配置:

import { createBrowserRouter, Navigate } from 'react-router-dom';
import LoginPage from './LoginPage';
import AuthLayout from './AuthLayout';
import BasicLayout from './BasicLayout';
import routesRender from './routesRender'; // 假设这是一个用于渲染路由的函数
import routesConfig from './routesConfig'; // 路由配置

const router = createBrowserRouter([
  {
    path: '/login',
    element: <LoginPage />, // 登录页
  },
  {
    path: '/', // 授权布局
    element: <AuthLayout />, // 检查用户是否登录
    children: [
      {
        path: '/', // 主布局
        element: <BasicLayout />,
        children: routesRender(routesConfig), // 渲染路由配置
      },
    ],
  },
]);

export default router;

逻辑说明

  1. /login 路由加载登录页面。
  2. AuthLayout 负责检查用户的登录状态,如果未登录,则重定向到 /login
  3. BasicLayout 渲染主界面布局,并通过子路由渲染实际的页面内容。

这样配置后,进入系统时会先进入登录页面,登录成功后才能访问其他页面,未登录的用户无法访问受保护的页面。

标签:登录,参考,React,AuthLayout,import,BasicLayout,路由,页面
From: https://blog.csdn.net/m0_61998604/article/details/142098807

相关文章

  • 鸿蒙OS模块化开发实战:独立路由与解耦策略
    前言在现代软件开发中,模块化设计是提高项目可维护性和可扩展性的关键。鸿蒙OS以其先进的架构设计,为开发者提供了强大的模块化开发工具。本文将深入探讨如何在鸿蒙OS中实现模块的独立路由配置,以降低模块间的耦合度,实现单模块的独立运行和开发。一、架构设计概述一个清晰的......
  • 路由相关
    路由分发研究djangoadmin源码时:namespace是什么?无namespacefromdjango.urlsimportreverseurl=reverse("v2")print(url)有namespacefromdjango.urlsimportreverseurl=reverse("namespace名称:v2")print(url)url=reverse("namespa......
  • 鸿蒙界面开发——组件(7):组件导航 & 页面路由
    组件导航(Navigation)(推荐)Navigation()Navigation(pathInfos:NavPathStack)Navigation是路由容器组件,一般作为首页的根容器,包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式。Navigation组件适用于模块内和跨模块的路由切换,一次开发,多端部署场景。通过组件......
  • YS9082HP量产工具操作步骤,YS9082HP固态怎么开卡成功分享,YS9082HC量产、YS9082HT量产、
    去年买的杂牌固态512G,只要不到90元,遇到的问题:温度固定在40度不变,写入20G后就出缓掉速度到20M,基本无法用,拆开发现是YS9082HP主控,还有三片后打标的颗粒,标的闪迪。先从量产部落随便找了个开卡工具读一下Flash ID,是45739CB376E3,闪迪的BICS4QLC颗粒:再用sg_flash_id软件......
  • 【干货】 计算机专业毕业设计选题攻略 100个高通过率计算机毕设题目推荐参考 教你如何
    注意:该项目只展示部分功能,如需了解,文末咨询即可。本文目录1、前言2、视频简介3、100个高通过率毕设选题参考4、更多推荐1、前言在毕业设计中,选题至关重要,一个好的题目不仅能提升项目完成的质量,还能在答辩时脱颖而出,增加高分通过的机会。然而,很多计算机专业的同......
  • Win11系统提示找不到ReactNativeXaml.dll文件的解决办法
    其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题,如果是新手第一时间会认为是软件或游戏出错了,其实并不是这样,其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库,这时你可以下载这个ReactNativeXaml.dll文件(挑选合适的版本文......
  • Java代码审计篇 | ofcms系统审计思路讲解 - 篇1 | 环境搭建、路由机制
    文章目录Java代码审计篇|ofcms系统审计思路讲解-篇1|环境搭建、路由机制1.前言2.项目环境搭建3.项目路由机制3.1.1)先搜索pom.xml文件,看看使用了什么框架3.2.2)确定是否是spring的路由机制3.3.3)确定自写路由机制的特点3.4.4)从前端探索3.5.5)断点调试3.6.6)寻......
  • React 中 useCallback 钩子的依赖项问题
    报错:The'getMergeMap'functionmakesthedependenciesofuseCallbackHook(atline192)changeoneveryrender.MoveitinsidetheuseCallbackcallback.Alternatively,wrapthedefinitionof'getMergeMap'initsownuseCallback()Hook.......
  • django 路由相关
    路由系统1常见操作通俗的语言来表示:URL->函数对应关系2路由源码分析2.1路由定义的本质fromdjango.urlsimportpath,re_pathfromapps.wwwimportviewsfromdjango.urlsimportURLPatternfromdjango.urls.resolversimportRoutePatternurlpatterns=[......
  • React diff算法原理
    React使用一种称为“Reconciliation”的过程来确定虚拟DOM树中的哪些部分发生了变化,从而最小化实际DOM更新的工作量。这个过程的核心是实现了一个高效的diff算法,通常被称为“Fiber”机制的一部分。虽然它并不完全等同于经典的diff算法(如Myers’diffalgorithm......