React-路由 react-router-dom

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

前端路由的功能:让用户从一个页面跳转到另一个页面。
前端路由是一套映射规则,在 React 中,是 URL 路径与组件的对应关系
使用 React 路由简单来说就是配置路径与组件(配对)

路由的本质: 一个路径 path 对应唯一的一个组件 component 当我们访问一个 path 自动把 path 对应的组件进行渲染。

React 路由基本使用

1.安装

首先你需要有一个 React 项目:npx create-react-app my-app (这是 React 脚手架初始化项目)

注:React 路由使用前需要先安装 react-router-dom 的包,React 脚手架初始化项目时不会自动安装这个包,需要我们手动再安装

安装包yarn add react-router-domnpm i react-router-dom@6

(注:本文使用的 react-router-dom 版本为 ^6.3.0

2.按需导入包中的核心组件

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'

说明:

  • BrowerRouter:包裹整个应用,一个 React 应用只需要使用一次,这个组件可以和 HashRouter 替换,二者主要区别如下:

模式

实现方式

路由url表现

HashRouter

监听url hash值实现

http://localhost:3000/#/about

BrowerRouter

h5的 history.pushState API实现

http://localhost:3000/about

  •  Link:用于指定导航链接,完成声明式的路由跳转 类似于 <router-link />(渲染到 DOM 中它其实就是一个 a 链接
  •  Routes:提供一个路由出口,组件内部会存在多个内置的 Route 组件,满足条件的路由会被渲染到组件内部(类比 router-view)
  • Route:用于定义路由路径 path 和渲染组件 element 的对应关系 [element:因为 react 体系内把组件叫做 react element]

代码示例

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'

function Home () {
  return (
    <p>这是首页的内容</p>
  )
}
function About () {
  return (
    <p>这是关于的内容</p>
  )
}
function App () {
  return (
    // 声明当前要用一个非hash模式的路由
    <BrowserRouter>
      <div className="App">
        {/* 指定跳转的组件,to 用来配置路由地址 */}
        <Link to="/">首页</Link><br />
        <Link to="/about">关于</Link>
        {/* 路由出口:路由对应的组件会在这里进行渲染 */}
        <Routes>
          {/* 指定路由路径和组件的对应关系:path 代表路径,element 代表对应的组件,它们成对出现 */}
          <Route path='/' element={<Home />}></Route>
          <Route path='/about' element={<About />}></Route>
        </Routes>
      </div>
    </BrowserRouter>
  )
}

export default App

编程式导航

注:上面使用 <Link to="/">跳转</Link> 的方式是:声明式导航

编程式导航: 通过 js 编程的方式进行路由页面跳转,比如说从首页跳转到关于页

实现步骤:

  1. 导入一个 useNavigate 钩子函数
  2. 执行 useNavigate 函数 得到 跳转函数
  3. 在事件中执行跳转函数完成路由跳转

示例代码

// 导入useNavigate函数
import { useNavigate } from 'react-router-dom'
const Home = () => {
  // 执行函数
  const navigate = useNavigate()
  return (
    <div>
      Home
      <button onClick={ ()=> navigate('/about') }> 跳转关于页 </button>
    </div>
  )
}

export default Home

注: 如果在跳转时不想添加历史记录,可以添加额外参数 replace 为 true

navigate('/about', { replace: true } )

路由传参

跳转路由的同时,很多时候都需要传递参数,这里有两种传参方式:

1. searchParams传参

路由传参

    navigate('/?id=1001&name=zs', { replace: true })

路由取参

import { useSearchParams } from 'react-router-dom'
// 在Home中读取页面传递过来的参数(以路径拼接的方式传递过来的参数)
function Home () {
  const [params] = useSearchParams()
  // params 是一个对象,对象里有一个get方法用来获取对应的参数
  // 把参数的名称作为get方法的实参传递即可
  const id = params.get('id')
  const name = params.get('name')
  return (
    <p>这是首页的内容,首页获取到的参数id:{id},name:{name}</p>
  )
}

2.params传参

路由传参

    navigate('/about/1002/lisi', { replace: true })

设置参数占位符

{/* 使用 params 传参和接收参数时,指定路由路径时需要提前使用“占位符”给参数进行占位 */}
<Route path='/about/:id/:name' element={<About />}></Route>

路由取参

import { useParams } from 'react-router-dom'
// 在关于页面接收登录页使用 params 传参的方式传递过来的参数
function About () {
  const params = useParams()
  return (
    <p>这是关于的内容,接收到登录页传递过来的id为:{params.id},name为{params.name}</p>
  )
}

注:以上两种路由传参的方式各有优劣,没有说一定要使用哪一种,个人根据习惯使用即可。

嵌套路由

实现步骤:

  1. 在一级路由的 <Route></Route>定义嵌套路由声明
  2. 在该一级路由组件内部通过 <Outlet /> 指定二级路由出口

示例代码

import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom'
const Home = () => {
  return (
    <div>
      <p>首页</p>
      <Link to='/'>to board</Link><br />
      <Link to='/artacle'>to artacle</Link><br />
      {/* 定义二级路由出口,嵌套的路由对应组件将渲染到此处 */}
      <Outlet />
    </div>
  )
}
const Board = () => {
  return (
    <div>这是 Board 组件,这是默认显示的二级组件</div>
  )
}
const Artacle = () => {
  return (
    <div>这是 Artacle 组件</div>
  )
}
function App () {
  return (
    <BrowserRouter>
      <div className="App">
        <Routes>
          {/* 一级路由 */}
          <Route path='/' element={<Home />}>
            {/* 在一级路由内部嵌套二级路由 */}
            {/* 默认二级:添加 index 属性,把它自己的 path 去掉即可 */}
            <Route index element={<Board />}></Route>
            {/* <Route path='board' element={<Board />}></Route> */}
            <Route path='artacle' element={<Artacle />}></Route>
          </Route>
        </Routes>
      </div>
    </BrowserRouter>
  )
}

export default App

注:默认二级路由:(见示例代码)

实现步骤:

  1. 默认二级路由标记 index 属性
  2. 把原本的路径 path 属性去掉

404路由配置

场景:当 url 的路径在整个路由配置中都找不到对应的 path ,使用404兜底组件进行渲染。

实现步骤:

  1. 准备一个 NotFound 组件(404的页面)
  2. 把该组件的路由对应关系配置为 Routes 内部的一级路由,path='*'

示例代码

import { BrowserRouter, Routes, Route } from 'react-router-dom'

// 定义 404 组件
const NotFound = () => {
  return (
    <h1>404  抱歉,页面未找到TAT</h1>
  )
}
function App () {
  return (
    <BrowserRouter>
      <div className="App">
        <Routes>
          {/* 一级路由 */}
          {/* 当所有路径都没有匹配到时渲染此组件 作为兜底 */}
          <Route path='*' element={<NotFound />}></Route>
        </Routes>
      </div>
    </BrowserRouter>
  )
}

export default App

集中式路由配置

场景: 当我们需要路由权限控制点时候, 对路由数组做一些权限的筛选过滤,所谓的集中式路由配置就是用一个数组统一把所有的路由对应关系写好替换本来的 Roues 组件文章来源地址https://www.toymoban.com/news/detail-431257.html

示例代码

import { BrowserRouter, Routes, Route, useRoutes } from 'react-router-dom'

import Layout from './pages/Layout'
import Board from './pages/Board'
import Article from './pages/Article'
import NotFound from './pages/NotFound'

// 1. 准备一个路由数组 数组中定义所有的路由对应关系
const routesList = [
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        element: <Board />,
        index: true, // index设置为true 变成默认的二级路由
      },
      {
        path: 'article',
        element: <Article />,
      },
    ],
  },
  // 增加n个路由对应关系
  {
    path: '*',
    element: <NotFound />,
  },
]

// 2. 使用useRoutes方法传入routesList生成Routes组件
function WrapperRoutes() {
  let element = useRoutes(routesList)
  return element
}

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        {/* 3. 替换之前的Routes组件 */}
        <WrapperRoutes />
      </BrowserRouter>
    </div>
  )
}

export default App

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

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

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

相关文章

  • 【React】React-router路由

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

    2023年04月17日
    浏览(68)
  • 【React】react-router 路由详解

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

    2024年02月01日
    浏览(40)
  • <React-Router>超全react路由知识点(跳转、传参、子路由、重定向等)

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

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

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

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

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

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

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

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

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

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

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

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

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

    2024年02月08日
    浏览(34)
  • react-router-domV6.21.1版本结合ant design mobile的TabBar标签栏和Popup弹出层实现移动端路由配置

    react-router-dom在V6版本之后更换了很多的API名称,在ant design mobile的TabBar配置中还是之前的旧版本,比如使用了 switch 组件等。我们在这里使用新版本的react-router-dom进行react移动端的配置 首先使用npm下载最新版的react-router-dom 然后在main.tsx文件中引入,并且使用MemoryRouter作为我们

    2024年01月25日
    浏览(59)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包