React路由的使用步骤和执行过程

柔光的暖阳◎ 2023-10-07 19:06 14阅读 0赞

现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。

前端路由的功能可以让用户从一个视图（页面）导航到另一个视图（页面），前端路由是一套映射规则，在React中是 URL路径 与 组件 的对应关系使用React路由简单来说，就是配置路径和组件（配对）。

**路由的基本使用**

1.安装：yarn add react-router-dom

2.导入路由的三个核心组件：Router / Route / Link

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

3.使用 Router 组件包裹整个应用（重要）

<Router> 
      <div className="App"> 
       // … 省略页面内容 
     </div> 
    </Router>

4.使用 Link 组件作为导航菜单（路由入口）

5.使用 Route 组件配置路由规则和要展示的组件（路由出口）

const First = () => <p>页面一的页面内容</p>
    <Router>
         <div className="App">
             <Link to="/first">页面一</Link>
             <Route path="/first" component={
        First}></Route>
          </div>
    </Router>

常用组件  
Router 组件：包裹整个应用，一个 React 应用只需要使用一次

两种常用 Router：HashRouter 和 BrowserRouter

HashRouter：使用 URL 的哈希值实现（localhost:3000/\#/first）

（推荐）BrowserRouter：使用 H5 的 history API 实现（localhost:3000/first）

Link 组件：用于指定导航链接（a 标签）

// to属性：浏览器地址栏中的pathname（location.pathname）
    <Link to="/first">页面一</Link>

Route 组件：指定路由展示组件相关信息

// path属性：路由规则 
    // component属性：展示的组件 
    // Route组件写在哪，渲染出来的组件就展示在哪 
    <Route path="/first" component={
        First}></Route>

1.  点击 Link 组件（a标签），修改了浏览器地址栏中的 url 。
2.  React 路由监听到地址栏 url 的变化。
3.  React 路由内部遍历所有 Route 组件，使用路由规则（ path ）与 pathname 进行匹配。
4.  当路由规则（path）能够匹配地址栏中的 pathname 时，就展示该 Route 组件的内容。

![在这里插入图片描述][7bfee329a39a484bbed8b22bcb77f18c.png]

### 前端开发入门教程 ###

[**web前端零基础html5 +css3+前端项目视频教程**][web_html5 _css3]

### JavaScript全套教程 ###

[Web前端必学的JS入门教程，零基础JavaScript入门][Web_JS_JavaScript]

### 前端React教程 ###

[**react零基础入门原理详解到好客租房项目实战**][react]

[7bfee329a39a484bbed8b22bcb77f18c.png]: https://img-blog.csdnimg.cn/7bfee329a39a484bbed8b22bcb77f18c.png
[web_html5 _css3]: https://www.bilibili.com/video/BV1Kg411T7t9?spm_id_from=333.999.0.0&vd_source=36d687ece6545eefcda2731026b8d90d
[Web_JS_JavaScript]: https://www.bilibili.com/video/BV1ux411d75J
[react]: https://www.bilibili.com/video/BV1gh411U7JD?spm_id_from=333.337.search-card.all.click