React---React路由

react的路由v6版本和v6以下版本区别很大，本博客是v6版本以上

v6官方文档：React Router | Overview

v6相关博客：react-router v6嵌套路由简单案例 - 简书

v6和v6一下区别博客：react 中router v6 与 v5 区别 - 哔哩哔哩

一.路由介绍

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

前端路由的功能:让用户从一个视图(页面）导航到另一个视图（页面)

前端路由是一套映射规则，在React中，是URL路径与组件的对应关系

使用React路由简单来说，就是配置路径和组件（配对)
 

二.路由的基本使用

1.使用步骤

1.安装:yarn add react-router-dom 或者npm add react-router-dom

2.导入路由的四个核心组件:Router / Route / Link/Routers

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

3. 使用Router组件包裹整个应用(重要)

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

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

     <Router>
      <div className="App">
        <Link to='/home'>首页</Link>
        <Link to='/cityList'>城市选择</Link>
        <Routes>
          <Route path='/home' element={<Home></Home>}></Route>
          <Route path='/cityList' element={<CityList></CityList>}></Route>
        </Routes>
      </div>
    </Router>

2.常用组件说明 

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

两种常用Router : HashRouter和 BrowserRouter
HashRouter :使用URL的哈希值实现(localhost:3000/#/first )
(推荐）BrowserRouter:使用H5的 history API实现( localhost:3000/first )
 

Link组件:用于指定导航链接( a标签)

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

//path属性:路由规则
//element属性:展示的组件
//Route组件写在哪，渲染出来的组件就展示在哪
<Route path='/home' element={<Home></Home>}></Route>

三.路由的执行过程

1．点击Link组件( a标签），修改了浏览器地址栏中的url。

2. React路由监听到地址栏url的变化。
3. React路由内部遍历所有Route组件，使用路由规则( path )与pathname进行匹配。

4．当路由规则 ( path )能够匹配地址栏中的pathname时，就展示该Route组件的内容。

四.编程式导航 

场景︰点击登录按钮，登录成功后，通过代码跳转到后台首页，如何实现?

编程式导航:通过JS代码来实现页面跳转
history是 React路由提供的，用于获取浏览器历史记录的相关信息

push(path):跳转到某个页面，参数path表示要跳转的路径
go(n):前进或后退到某个页面，参数n表示前进或后退页面数量(比如:-1表示后退到上一页)

五.默认路由 

问题:现在的路由都是点击导航菜单后展示的，如何在进入页面的时候就展示呢?

默认路由:表示进入页面时就会匹配的路由
默认路由path为:

 <Route path='/'  element={<Home></Home>}></Route>

六.嵌套路由：

父组件home:

       <Routes>
          <Route path='/home/*' element={<Home></Home>}>
          </Route>
        </Routes>

子组件news:

      <Routes>
        <Route path='/news' element={<News></News>}></Route>
      </Routes>

然后子组件news通过/home/news访问 

七.路由重定向

Redirect组件用于实现路由重定向，to属性指定要跳转到的路由地址
 

import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
    <Router>
      <div className="App">
        <Route exact path='/' render={() => <Redirect to='/home' />} />
      </div>
    </Router>

八.总结

1. React路由可以有效的管理多个视图（组件)实现SPA
2. Router组件包裹整个应用，只需要使用一次
3. Link组件是入口，Route组件是出口
4．通过props.history 实现编程式导航
6. React路由的一切都是组件，可以像思考组件一样思考路由