React学习之——Router(v6)

最新推荐文章于 2023-07-02 21:59:50 发布
最新推荐文章于 2023-07-02 21:59:50 发布
阅读量384 收藏
点赞数
文章标签： javascript 前端 react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HopelessRomantic/article/details/126304785
版权

React学习之——Router(v6)

安装

$ npm install react-router-dom@6

配置路由

在入口文件导入BrowserRouter文件,并包裹根组件:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './App'

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
)

在根组件使用 Routes 和 Route 定义路由：

import React from 'react'
import { Routes, Route } from 'react-router-dom'
import { Home, About } from './components'

function App() {
  return (
    <div className="App">
      <h1>Welcome to React Router!</h1>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
      </Routes>
    </div>
  )
}

export default App

导航

通过 Link 组件导航：

import { Link } from 'react-router-dom'

function Home() {
  return (
    <main>
      <h2>Home</h2>
      <Link to="/about">About</Link>
    </main>
  )
}

function About() {
  return (
    <main>
      <h2>About</h2>
      <Link to="/">Home</Link>
    </main>
  )
}

或者使用 useNavigate Hook 导航

import { useNavigate } from 'react-router-dom'

function About() {
  let navigate = useNavigate()
  return (
    <main>
      <h2>About</h2>
      <button onClick={() => {
        navigate('/')
      }}>Home</button>
    </main>
  )
}

读取路由参数

使用 :style 语法配置路由路径，使用 useParams Hook 读取参数；带参数路由优先级比完全相等的优先级低

import { Routes, Route, useParams } from "react-router-dom"

function Article() {
  let params = useParams()
  return (
    <main>
      <h2>Article</h2>
      <p>id: { params.id }</p>
    </main>
  )
}

function App() {
  return (
    <div className="App">
      <h1>Welcome to React Router!</h1>
      <Routes>
        <Route path="/article/:id" element={<Article />} />
      </Routes>
    </div>
  )
}

嵌套路由

嵌套 Route 组件， 在父组件中使用 Outlet 组件渲染子路由组件：

function Contact() {
  return (
    <main>
      <h2>Contact</h2>
      <Link to="/contact/address">Address</Link>
      <Link to="/contact/phone">Phone</Link>
      <Outlet></Outlet>
    </main>
  )
}

function Address() {
  return <div>This is address: xxxxxxxxxxx</div>
}

function Phone() {
  return <div>This is phone: xxxxxxxxxxx</div>
}

function App() {
  return (
    <div className="App">
      <h1>Welcome to React Router!</h1>
      <Routes>
        <Route path="/contact" element={<Contact />}>
          <Route path="address" element={<Address />}></Route>
          <Route path="phone" element={<Phone />}></Route>
        </Route>
      </Routes>
    </div>
  )
}

索引路由

当 URL 匹配父路由而不匹配子路由时，可以添加一个索引路由作为默认子路由来将组件渲染到出口。
在子 Route 组件中添加 index 属性：

function ContactIndex() {
  return (
    <div>ContactIndex</div>
  )
}

function App() {
  return (
    <div className="App">
      <h1>Welcome to React Router!</h1>
      <Routes>
        <Route path="/contact" element={<Contact />}>
          <Route index element={<ContactIndex />}></Route>
          <Route path="address" element={<Address />}></Route>
          <Route path="phone" element={<Phone />}></Route>
        </Route>
      </Routes>
    </div>
  )
}

相对路由

不以斜杆 / 开头的 URL 的路由会被视为相对路由，修改上面的 Contact 组件：

function Contact() {
  return (
    <main>
      <h2>Contact</h2>
      <Link to="address">Address</Link>
      <Link to="phone">Phone</Link>
      <Outlet></Outlet>
    </main>
  )
}

404 路由

用于呈现没有其他路由与 URL 匹配时的路由组件，此路由优先级最低；嵌套路由也可以使用 404 路由：

function App() {
  return (
    <div className="App">
      <h1>Welcome to React Router!</h1>
      <Routes>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  )
}

多组路由

一个应用程序可以有任意数量的 Routes 组件。

后代路由

Routes 组件可以放置在任何地方，包括在另一个组件树的深处，它将自动构建在呈现它们的路由的路径上，这时需要在父路由路径的末尾加上星号*：

function Article() {
  return (
    <main>
      <h2>Article</h2>
      <Routes>
        <Route path="comment" element={<Comment />} />
        <Route path="statistics" element={<Statistics />} />
      </Routes>
    </main>
  )
}

function App() {
  return (
    <div className="App">
      <h1>Welcome to React Router!</h1>
      <Routes>
        <Route path="/article/:id/*" element={<Article />} />
      </Routes>
    </div>
  )
}

完整示例代码

import { Routes, Route, Link, useParams, Outlet } from 'react-router-dom'
import './App.scss'

function Nav() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/article/1">Article</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  )
}

function Home() {
  return (
    <main>
      <h2>Home</h2>
      <Nav />
    </main>
  )
}

function About() {
  return (
    <main>
      <h2>About</h2>
      <Nav />
    </main>
  )
}

function Comment() {
  return <div>This is comment list.</div>
}

function Statistics() {
  return <div>This is statistics.</div>
}

function Article() {
  let params = useParams()
  return (
    <main>
      <h2>Article</h2>
      <Nav />
      <p>id: {params.id}</p>
      <Link to="comment">Comment</Link>
      <Link to="statistics">Statistics</Link>
      <Routes>
        <Route path="comment" element={<Comment />} />
        <Route path="statistics" element={<Statistics />} />
      </Routes>
    </main>
  )
}

function Contact() {
  return (
    <main>
      <h2>Contact</h2>
      <Nav />
      <Link to="address">Address</Link>
      <Link to="phone">Phone</Link>
      <Outlet></Outlet>
    </main>
  )
}

function ContactIndex() {
  return <div>ContactIndex</div>
}

function Address() {
  return <div>This is address: xxxxxxxxxxx</div>
}

function Phone() {
  return <div>This is phone: xxxxxxxxxxx</div>
}

function NotFound() {
  return <div>404 Not Found</div>
}

function App() {
  return (
    <div className="App">
      <h1>Welcome to React Router!</h1>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />}>
          <Route index element={<ContactIndex />}></Route>
          <Route path="address" element={<Address />}></Route>
          <Route path="*" element={<NotFound />} />
          <Route path="phone" element={<Phone />}></Route>
        </Route>
        <Route path="/article/:id/*" element={<Article />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  )
}

export default App

概念定义

  • URL - 地址栏中的URL。很多人交替使用术语“URL”和“route”，但这不是 React Router 中的路由，它只是一个URL。

  • Location - 这是一个特定于路由器的对象，基于内置浏览器的 window.location 对象。它代表“用户所在的位置”。它主要是 URL 的一种对象表示形式，但它有更多的含义。

  • Location State - 与URL中未编码的 location 保持一致的值。与 hash 或 search params （URL中编码的数据）非常相似，存储在浏览器的内存中。

  • History Stack - 当用户导航时，浏览器会跟踪堆栈中的每个位置。如果在浏览器中单击并按住“后退”按钮，您可以在那里看到浏览器的历史堆栈。

  • Client Side Routing (CSR) - 一个普通的HTML文档可以链接到其他文档，浏览器自己处理历史堆栈。Client Side Routing 使开发人员能够操纵浏览器历史堆栈，而无需向服务器发出文档请求。

  • History - 一个对象，允许React Router订阅URL中的更改，并提供 API 以编程方式操作浏览器历史堆栈。

  • History Action - pop、push 或 replace。用户可以出于以下三个原因之一访问 URL。将新条目添加到历史堆栈时的 push（通常是链接单击或程序员强制导航）。replace 与之类似，只是它替换堆栈上的当前条目，而不是推送一个新条目。最后，当用户单击浏览器中的后退或前进按钮时，会出现 pop 操作。

  • Segment - URL 或 path pattern 中 / 字符之间的部分。例如，“/users/123” 有两个 segment。

  • Path Pattern - 这些看起来像 URL，但可以有特殊字符来将URL与路由匹配，比如动态 segment “/users/:userId” 或星形 segment “/docs/*”。它们不是URL，它们是路由器将匹配的模式。

  • Dynamic Segment - 动态的 path pattern 的 segment ，这意味着它可以匹配该 segment 中的任何值。例如，模式 /users/:userId 将匹配像 /users/123 这样的 URL。

  • URL Params - 与动态 segment 匹配的URL解析值。

  • Router - 有状态的顶级组件，使所有其他组件和 hook 工作。

  • Route Config - routes objects 树，将根据当前 location 进行排序和匹配（嵌套），以创建 route matches 的分支。

  • Route - 通常具有 { path，Element } 或形状的对象或 Route Element。path 是一种 path pattern。当 path pattern 与当前 URL 匹配时，将呈现元素。

  • Route Element - 或者。通过读取此元素的 props 来创建 Route，但在其他情况下不执行任何操作。

  • Nested Routes - 因为路由可以有子路由，每个路由通过 segments 定义 URL 的一部分，所以单个 URL 可以匹配树的嵌套“分支”中的多个路由。这样可以通过 Outlet、Relative links 等实现自动布局嵌套。

  • Relative links - 不以 / 开头的链接将继承渲染它们的最近路径。这使得链接到更深层次的 URL 变得很容易，而无需知道并构建整个路径。

  • Match - 当路由与 URL 匹配时保存信息的对象，如匹配的 URL 参数和路径名。

  • Matches - 与当前 location 匹配的路由数组（或路由配置的分支）。此结构支持嵌套路由。

  • Parent Route - 带有子路由的路由。

  • Outlet - 子路由组件的渲染出口。

  • Index Route - 一个没有子路径的路由，匹配父路由 URL 时渲染。

    • Layout Route - 一种没有 path 的父路由，专门用于在特定布局中对子路由进行分组。
HopelessRomantic
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
react笔记_10react路由
qq_43260366的博客
12-22 646
在注册路由时如下：可能有两个甚至多个的路由注册,通过 下面代码 注册路由 当path变为/home时 路由出口的位置展示哪个组件-- Home组件orTest组件or两个都展示？以上是注册的几个路由，但是一进入页面时，匹配不到任何的路由，此时若是我们想进入页面(url为空)时默认展示home组件的内容，可以使用路由重定向。在App.vue(跟组件)注册了 Home路由和About路由，在Home组件注册了 Sun1和Sun2 两个子路由。以下就注册了一个 Home 组件 ，组件路径为/home。
React从next/navigation和next/router导入useRouter区别
最新发布
weixin_44929577的博客
05-24 741
对于新项目或者迁移到Next.js v13的项目，建议使用`next/navigation`以利用框架中的最新功能和优化。然而，如果需要维护或者操作旧项目，使用`next/router`是合适的选择。
React 路由基础--React路由介绍
m0_54088431的博客
11-08 4080
两种常用的路由模式：BrowserRouter和HashRouter声明当前要用是一个非hash的模式的路由包裹整个应用一个React应用只需要使用一次HashRouter，hash模式的路由一个有#（HashRouter），一个一带#（BrowserRouter）（推荐）Link指定导航链接，完成路由跳转to属性指定路由地址，最终被渲染为a标签Routes提供一个路由出口，满足条件的路由组件，会渲染到组件内部Route用于指定路由组件和路由地址path：路由组件对应的路径；
react路由基础(六)
weixin_68658847的博客
03-28 355
react路由基础(六)
react-router-dom6，react路由6和5的区别，一文搞懂react-router-dom6
jiang7701037的博客
07-02 1628
router-router-dom6 就是当前react路由的最新版本 在2021年11月发布 已经是路由推荐版本。
react pro——————————
04-14
react pro——————————
react-router-v6:在此仓库中，我了解了React Router v6的一些基础知识
04-17
Create React App入门该项目是通过引导的。可用脚本在项目目录中，可以运行：yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误...
React路由管理之React Router总结
08-27
React项目通常都有很多的URL需要管理，最常使用的解决方案就是React Router了，本篇文章主要介绍了React路由管理之React Router总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-router学习demo
02-28
这个“react-router学习demo”很可能是为了帮助开发者深入理解如何在React项目中实现路由导航功能。React Router 提供了一种声明式的方式来定义路由，使得应用的导航逻辑与UI组件紧密结合。 首先，React Router 有...
基于React18、React-Router V6、Redux Vite2、Ant-Design 开源的一套后台管理框架
11-04
Hooks Admin 是一个全面的后台管理框架，它充分利用了React18、React-Router V6、Redux、React Hooks、TypeScript以及Vite2等现代前端技术，同时采用了流行的Ant Design UI库，为开发者提供了高效且易用的开发环境。...
React-路由
lovepink527的博客
10-21 143
React路由 一、路由介绍 前端路由是url路径与组件的对应关系 二、使用步骤 1.基本使用npm add react-router-dom 2.导入三个核心组件： Router/Route/Link // HashRouter\BrowserRouter两种模式,推荐BrowserRouter import {BrowserRouter as Router,Route,Link} from 'react-router-dom' 3.使用Router组件包裹整个应用 4.Link组件作
react路由介绍、路由的基本使用
m0_45877477的博客
07-29 420
为了使用单页面来管理原来多页面的功能,前端路由应运而生
React Router 6
qq_39206750的博客
03-28 1315
Router6 1. 一级路由改动 注册 Route 时必须要包裹 Routes 注册组件中的 component 改为 element //旧版 <Route path={'/home'} component={Home} /> //新版 <Routes> <Route path="/about" element={<About />} /> <Route path="/home" element={<Home />} /> <
React路由v6+antd+路由鉴权
weixin_73577920的博客
01-03 442
React 官方并没有提供对应的路由插件，因此，我们需要下载第三方的路由插件 —— React Router。React Router 在 2021 年 11 月份的时候更新 v6 的版本。
react_路由的使用
随手记的笔记
03-10 742
1.第一部分是路由的出口 这里一定要用BrowserRouter包裹住 import { Redirect, Route, Switch } from 'react-router' import { BrowserRouter } from 'react-router-dom'; <Content> <BrowserRouter> <Switch> <Route path='/studentMain/student
React学习笔记_React Router 6
qq_20470063的博客
03-10 631
React学习笔记
react router6.x官方DEMO
qq_41077776的博客
10-20 5712
React Router 6.x版本官方DEMO教程中文版，以及一些理解和分析。
react学习：react-router路由
weixin_44828005的博客
05-28 1458
问题导向 react生命周期何时调用？以及应用场景？ 如果你都有了答案，可以忽略本文章，或去react学习地图寻找更多答案 学习更多 react学习地图
react router v6
07-27
React Router v6 是 React Router 的最新版本，它是一个用于在 React 应用中处理路由的库。它提供了一种声明式的方式来定义和管理应用程序的不同路由和页面之间的导航。 React Router v6 在与 React v17+ 的新 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值