React 路由react-router-dom详解

这篇具有很好参考价值的文章主要介绍了React 路由react-router-dom详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

React 路由react-router-dom详解

( 路由嵌套 + 路由传参 + 路由权限 + 路由优化 按需导入 + 404页面 )

前面我们先了解一下 路由是什么? 路由分类有哪些?内置API有哪些
可能有点枯燥,不喜欢看的直接跳过

1,相关理解

  1. 单页Web应用(single page web application,SPA)。
  2. 整个应用只有一个完整的页面。
  3. 点击页面中的链接不会刷新页面,只会做页面的局部更新。
  4. 数据都需要通过ajax请求获取, 并在前端异步展现。

2,路由的理解:

1. 什么是路由?
  1. 一个路由就是一个映射关系(key:value)
  2. key为路径, value可能是function或component

2,react-router-dom的理解:

  1. react的一个插件库。
  2. 专门用来实现一个SPA应用。
  3. 基于react的项目基本都会用到此库。

一,基本路由使用:

先看看效果:

React 路由react-router-dom详解

1,下载安装:

  1. win + R

  2. cmd 打开
    React 路由react-router-dom详解

  3. cd/react项目文件目录
    React 路由react-router-dom详解

  4. 安装:

 npm  i react-router-dom -S

React 路由react-router-dom详解

很好,你已经完成了,安装!

二, 接下来是使用路由的步骤

文件
React 路由react-router-dom详解

1, 创建页面

src路径下新建views文件,页面组件新建在这里面

React 路由react-router-dom详解

2,新建路由文件

src路径下 新建router文件夹,在这里配置路由

React 路由react-router-dom详解

3,配置路由文件:

router路径下 新建index.jsx文件夹,在这里配置路由

React 路由react-router-dom详解

  1. 导入路由依赖
// 导入路由依赖
import { useRoutes } from "react-router-dom";
  1. 导入所需组件,首页 关于
// 导入所需组件,首页  关于
import HomeView from "../views/HomeView";
import AboutView from "../views/AboutView";
  1. 创建路由
// 创建路由
const routes = [
  {
    path: "/",
    element: (<HomeView></HomeView>)
  },
  {
    path: "/about",
    element: (<AboutView ></AboutView >)
  },
];
  1. 使用useRoutes 创建,导出路由
// 使用useRoutes 创建
export default function RouterView() {
  // 创建路由
  const elem = useRoutes(routes);
  // 返回接口
  return elem;
}

完整代码:
React 路由react-router-dom详解

以上配置是路由基础配置
这样还是看不到效果的,要配置导航使用路由

4,使用并切换路由,配置App.jsx文件:

路径:src / App.jsx

  1. 导入:
import RouterView from "./router";
import { HashRouter as Router, NavLink } from "react-router-dom";

Router: 路由

RouterView: 路由组件 ,导入路由文件

HashRouter: 哈希路由

NavLink: 导航链接

  1. 使用,配置导航链接,这里使用 函数组件:

全部代码:

import RouterView from "./router";
import { HashRouter as Router, NavLink } from "react-router-dom";

function App() {
  return (
    <Router>
      <NavLink to="/">首页</NavLink> &emsp;||&emsp;
      <NavLink to="/about">关于</NavLink> &emsp;||&emsp;
      <RouterView />
    </Router>
  );
}

export default App;
  1. 效果图:
    React 路由react-router-dom详解

三, 路由传参:

1,路由文件配置:

React 路由react-router-dom详解

2,组件使用:

ProductView.jsx文件配置:

  1. 引入useParams

这里我新建了一个组件 ProductView.jsx

 import { useParams } from "react-router-dom"
  1. 获取参数
  const { id } = useParams()
  1. 渲染参数:
    <h1>产品参数:{id}</h1>
ProductView.jsx 文件代码:

React 路由react-router-dom详解

App.jsx 文件配置:

传参:

<NavLink to="/product/123">产品123</NavLink> &emsp;||&emsp;
<NavLink to="/product/456">产品456</NavLink> &emsp;||&emsp;
App.jsx 文件代码:

React 路由react-router-dom详解

效果:
React 路由react-router-dom详解

四, 路由嵌套:

  1. 路由文件配置:src / router / index.jsx
// 导入路由依赖
import { useRoutes } from "react-router-dom";
// 导入所需组件,首页  关于
import HomeView from "../views/HomeView";
import AboutView from "../views/AboutView";
import ProductView from "../views/ProductView";
import AdminView from "../views/admin/AdminView";
import DashView from "../views/admin/DashView";
import OrderList from "../views/admin/OrderList";
// 组件嵌套组件
import Private from "./Private";
// 创建路由
const routes = [
  {
    path: "/",
    element: <HomeView></HomeView>
  },
  {
    path: "/about",
     element: <AboutView></AboutView>
  },
  {
    path: "/product/:id",
    element: <ProductView></ProductView>
  },
  {
    path: "/admin",
    element:  <AdminView />
    // 配置子路由
    children: [
      {
        path: "",
        element: <DashView></DashView>
      },
      {
        path: "orderlist",
        element: <OrderList></OrderList>
      }
    ]
  },


// 使用useRoutes 创建
export default function RouterView() {
  // 创建路由
  const elem = useRoutes(routes);
  // 返回接口
  return elem;
}

  1. 组件文件配置:

新建文件 以下图:
React 路由react-router-dom详解

views / AdminView.jsx文件:

import { NavLink, Outlet } from "react-router-dom";
function AdminView() {
  return (
    <div>
      <h3>管理页面</h3>
      <NavLink to="">管理页面</NavLink>&emsp;||&emsp;
      <NavLink to="orderlist">概览页面</NavLink>
      <Outlet />
    </div>
  );
}
export default AdminView;

NavLink :导航链接
Outlet: 子组件容器

views / DashView.jsx文件:

function DashView() {
    return ( <div>
        <h3>概览页面内容</h3>
    </div> );
}
export default DashView;

views / OrderList.jsx文件:

function OrderList() {
    return (<div>
        <h3>管理页面内容</h3>
    </div>);
}
export default OrderList;

效果图:

React 路由react-router-dom详解

五, 路由查询参数:

1, App.jsx文件 导航配置:

React 路由react-router-dom详解
代码:

import RouterView from "./router";
import { HashRouter as Router, NavLink } from "react-router-dom"

function App() {
    return (<Router>
        <NavLink to="/">首页</NavLink >  &emsp;||&emsp;
        <NavLink to="/about">关于</NavLink> &emsp;||&emsp;
        <NavLink to="/admin">admin页面</NavLink> &emsp;||&emsp;
        <NavLink to="/product/123">产品123</NavLink> &emsp;||&emsp;
        <NavLink to="/product/456">产品456</NavLink> &emsp;||&emsp;
        <NavLink to="/about?redirect=hello">产品hello</NavLink> &emsp;||&emsp;
        <NavLink to="/about?redirect=word">产品word</NavLink> &emsp;||&emsp;
        <RouterView></RouterView>
    </Router>);
}
export default App;

传参:?redirect= “ 传的查询参数 ”

2,AboutView.jsx 文件:

代码:

import { useSearchParams, NavLink, useNavigate, useLocation } from "react-router-dom"
function AboutView() {
    // 获取about查询参数redirect的值
    const [SearchParams] = useSearchParams()
    // 获取redirect的值
    const redirect = SearchParams.get('redirect')
    // 渲染
    return (<div>
         {/* // 传递查询参数 */}
        <h1>About页面查询参数:-{redirect}</h1>
    </div>);
}

// 导出组件
export default AboutView;

六,组件按需导入(懒加载):

用于 性能优化
lazy方法, subspense组件

1,定义懒加载组件router / LazyLoad.jsx

// 动态加载组件
import { lazy, Suspense } from "react";
// 动态加载组件 方法
function LazyLoad(url) {
  // 配置动态加载组件路径
  const Element = lazy(() => import(url));
  return (
    // 返回组件,Suspense:懒加载组件
    <Suspense fallback={<h3>加载中. . . </h3>}>
      {/* 内容组件 */}
      <Element />
    </Suspense>
  );
}
// 导出方法
export default LazyLoad;

2,路由router / index.jsx文件使用:

引入:
// 导入懒加载组件方法
import LazyLoad from "./LazyLoad";
使用:
element: LazyLoad("../views/HomeView")
router / index.jsx文件 代码:
// 导入路由依赖
import { useRoutes } from "react-router-dom";
// 导入所需组件,首页  关于
import HomeView from "../views/HomeView";
import AboutView from "../views/AboutView";
import ProductView from "../views/ProductView";
import AdminView from "../views/admin/AdminView";
import DashView from "../views/admin/DashView";
import OrderList from "../views/admin/OrderList";

// 创建路由
const routes = [
  {
    path: "/",
    element: ("../views/HomeView")
  },
  {
    path: "/about",
    element: ("../views/AboutView")
  },
  {
    path: "/product/:id",
    element: ("../views/ProductView")
  },
  {
    path: "/admin",
    element:  <Private><AdminView /></Private>,
    // 配置子路由
    children: [
      {
        path: "",
        element: <DashView></DashView>
      },
      {
        path: "orderlist",
        element: <OrderList></OrderList>
      }
    ]
  },

];
// 使用useRoutes 创建
export default function RouterView() {
  // 创建路由
  const elem = useRoutes(routes);
  // 返回接口
  return elem;
}

效果图:

按需加载

React 路由react-router-dom详解

七,路由权限:

类似于Vue里的路由守卫:未登陆 不能打开一些页面
有权限返回子组件,没有权限跳转到登录

1,定义权限组件router/Private.jsx

本地存储有 token,就有权限,
没有token,就没有权限

import {Navigate} from "react-router-dom"
// 权限路由
function Private(props) {
    if(localStorage.getItem("token")) {
        return <>{props.children}</> ;
    }else {
        return <Navigate to="/" />
    }
}

export default Private;

2,路由index . jsx文件使用:

权限组件包裹着 内容组件
element: < Private>< AdminView /></ Private>,

// 导入路由依赖
import { useRoutes } from "react-router-dom";
// 导入所需组件,首页  关于
import HomeView from "../views/HomeView";
import AboutView from "../views/AboutView";
import ProductView from "../views/ProductView";
import AdminView from "../views/admin/AdminView";
import DashView from "../views/admin/DashView";
import OrderList from "../views/admin/OrderList";
import Private from "./Private";
import LazyLoad from "./LazyLoad";
// 创建路由
const routes = [
  {
    path: "/",
    element: LazyLoad("../views/HomeView")
  },
  {
    path: "/about",
    element: LazyLoad("../views/AboutView")
  },
  {
    path: "/product/:id",
    element: LazyLoad("../views/ProductView")
  },
  {
    path: "/admin",
    element:  <Private><AdminView /></Private>,
    // 配置子路由
    children: [
      {
        path: "",
        element: <DashView></DashView>
      },
      {
        path: "orderlist",
        element: <OrderList></OrderList>
      }
    ]
  },

];
// 使用useRoutes 创建
export default function RouterView() {
  // 创建路由
  const elem = useRoutes(routes);
  // 返回接口
  return elem;
}

效果图:

React 路由react-router-dom详解

八,设置404错误页面:

1,新建404组件文件 src / views / NoMatch.jsx :

import { NavLink } from "react-router-dom"
function NoMatch() {
    return (<div>
        <h1>你的页面被😽偷走了!</h1>
        <NavLink to="/">首页</NavLink>
    </div>);
}
export default NoMatch;

2,路由配置,src / router / index.jsx :

// 配置404页面
{
path: “*”,
element:
}
path 值为 *

// 导入路由依赖
import { useRoutes } from "react-router-dom";
// 导入所需组件,首页  关于
import NoMatch from "../views/NoMatch";
import HomeView from "../views/HomeView";
// import AboutView from "../views/AboutView";
import ProductView from "../views/ProductView";
import AdminView from "../views/admin/AdminView";
import DashView from "../views/admin/DashView";
import OrderList from "../views/admin/OrderList";
// 导入权限组件
import Private from "./Private";
// 导入懒加载组件方法
import LazyLoad from "./LazyLoad";
// 创建路由
const routes = [
  {
    path: "/",
    element: LazyLoad("../views/HomeView")
  },
  {
    path: "/about",
    element: LazyLoad("../views/AboutView")
  },
  {
    path: "/product/:id",
    element: LazyLoad("../views/ProductView")
  },
  {
    path: "/admin",
    element: ( <Private><AdminView /></Private>),
    // 配置子路由
    children: [
      {
        path: "",
        element: <DashView/>
      },
      {
        path: "orderlist",
        element: <OrderList/>
      }
    ]
  },
  // 配置404页面
  {
    path: "*",
    element: <NoMatch />
  }
];

// 使用useRoutes 创建
export default function RouterView() {
  // 创建路由
  const elem = useRoutes(routes);
  // 返回接口
  return elem;
}

效果图:

React 路由react-router-dom详解

总结:

路由组件与方法:

  1. 组件

    < HashRouter> 哈希路由
    < BrowserRouter> 浏览器路由
    < NavLink> 导航链接
    选中会有active 类名
    < Link>导航链接
    < OutLet>子路由容器

  2. 方法

    useRoutes使用路由配置
    useParams() 路由参数
    useSearchParams() 获取查询参数

React 路由react-router-dom详解文章来源地址https://www.toymoban.com/news/detail-410798.html



到了这里,关于React 路由react-router-dom详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【React】react-router 路由详解

    🚩🚩🚩 💎个人主页: 阿选不出来 💨💨💨 💎个人简介: 一名大二在校生,学习方向前端,不定时更新自己学习道路上的一些笔记. 💨💨💨 💎目前开发的专栏: JS 🍭Vue🍭React🍭 💨💨💨 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,根据不同的url地

    2024年02月01日
    浏览(38)
  • React Router 中的路由导航方法:push() 和 replace() 详解

    在 React Router 中, this.props.history.push() 和 this.props.history.replace() 是用于编程式导航的两个常用方法。它们允许我们在组件中动态地更改路由,并可选地传递状态参数。本文将介绍这两个方法的用法和区别。 push() 方法将在导航时创建一个新的历史记录条目,并将用户重定向到新

    2024年03月15日
    浏览(44)
  • 【React】React-router路由

    路由是根据不同的url地址展示不同的内容或页面 注: 一个针对react设计的路由解决方案,可以友好的帮助解决React components到URL之间的同步映射关系 导入路由 注:路由模式有 HashRouter 和 BrowserRouter 两种模式,其中BrowserRouter的路径没有#,样式好看,真正朝后端发请求,后端若

    2023年04月17日
    浏览(57)
  • <React-Router>超全react路由知识点(跳转、传参、子路由、重定向等)

    目录 一、路由环境配置 1.搭建一个项目名为boke(自定义),编辑文档语言为TypeScript的项目环境。 2.安装所有package.json中的依赖----安装包(注意要【cd 项目名】进入项目文件安装) 3.添加React-Router路由 4.文件、目录相关修改与搭建 二、路由的懒加载  三、路由跳转 1.标签跳转(

    2024年02月11日
    浏览(88)
  • 探索React Router:实现动态二级路由

    我有一个路由配置的二维数组,想根据这个数组结合路由组件来动态生成路由,应该怎么样实现。在 React Router 6 中渲染二级路由的方式跟 React Router 65相比有一些变化,但核心思路仍然是利用 Route 组件和路由嵌套的方式。下面是具体的步骤: 定义路由数组 注意,这里我们使用

    2024年04月25日
    浏览(30)
  • React-Router路由基础篇(简单易学)

    文章目录 系列文章目录 前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结 提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。 (

    2024年04月14日
    浏览(42)
  • React-Router详解

    React-Router是一款用于构建单页面应用(SPA)中处理路由的JavaScript库。在现代的Web应用中,SPA已经成为了一种常见的应用架构模式,它允许在不刷新整个页面的情况下进行交互式的用户体验。而React-Router作为React生态系统中的路由管理工具,为开发者提供了一种简洁、灵活且强

    2024年02月08日
    浏览(41)
  • 【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet

    前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻React专栏 之前学习了react-router-dom5版本的相关内容 参考文章👉🏻React路由(详解版)和 路由的模糊匹配,重定向以及嵌套路由 今天来学习react-router-dom6版本的相关知识! 感兴趣的小伙伴一起来看看吧~🤞 React Router 以三个不

    2024年02月02日
    浏览(47)
  • react 11之 router6路由 (两种路由模式、两种路由跳转、两种传参与接收参数、嵌套路由,layout组件、路由懒加载)

    npm i react-router-dom 两种模式 Router:所有路由组件的根组件,包裹路由的最外层容器 Link:跳转路由组件 Routes :用于定义和渲染路由规则( 用于替换 Switch 组件) Route:路由规则匹配组件,显示当前规则对应的组件 exact = 精确匹配,只有当 path 和 pathname 完全匹配时才会展示该路由

    2024年02月12日
    浏览(42)
  • 【React Router】React Router学习笔记

    React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步。 React Router 知道如何为我们搭建嵌套的 UI,因此我们不用手动找出需要渲染哪些 Child 组件。 获取URL参数。当渲染组件时,React Router 会自动向 Route 组件

    2024年02月08日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包