带你走进React路由的世界

短命女 2022-10-16 08:51 193阅读 0赞

## 介绍 ##

对路由进行管理。在传统的没有使用路由情况下，通过读取url中的hash值来进行识别加载的组件  
react路由则将路由解析，映射关系进行了封装，通过配置进行管理

现代的前端多数是SPA（单页面程序），SPA使用户的体验更好、服务器压力小，所以才会如此受欢迎

> 1）规则配置： 根据配置的规则进行对应匹配  
> 2）路径匹配：根据路径中定义的参数进行对应匹配  
> 3）优先级：在相同的规则下，顶层规则会被优先匹配

## 使用 ##

安装

npm install --save react-router-dom

导入路由核心组件

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

使用Router进行包裹

使用Link作为导航菜单的路由入口

<ul>
                  <li>
                    <Link to="/first">first</Link>
                  </li>
                  <li>
                    <Link to="/two">Two</Link>
                  </li>
    </ul>

Route配置路由规则和要展示的组件

演示：  
![在这里插入图片描述][20210528200334566.gif_pic_center]

完整代码：

import React from 'react';
    import ReactDOM from 'react-dom';
    import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
    
    class App extends React.Component {
      state = {
        num: 1
      }
      render () {
        return (
          <Router>
            <div className="app">
              <div>
                <ul>
                  <li>
                    <Link to="/first">first</Link>
                  </li>
                  <li>
                    <Link to="/two">Two</Link>
                  </li>
                </ul>
              </div>
              <div>
                <Route path="/first" component={First}></Route>
                <Route path="/two" component={Two}></Route>
              </div>
            </div>
          </Router>
        )
      }
    }
    
    const First = () => [
      <div>
        First
      </div>
    ]
    
    const Two = () => [
      <div>
        Two
      </div>
    ]
    
    
    ReactDOM.render(
      <App />,
      document.getElementById('root')
    );

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

两种常用的Router： HashRouter和BrowserRouter
    HashRouter： 使用URL的Hash值实现 （localhost:3000/#/first）
    推荐 BrowserRouter：使用H5的history API实现（localhost3000/first）

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

最终Link会编译成a标签，而to属性会被编译成 a标签的href属性

*  Route组件：指定路由展示组件内容

path属性：路由规则，这里必须跟Link组件里面to属性的值一致
    component属性：展示的组件
    Route写在哪，渲染出来的组件就在哪

### 默认路由 ###

表示进入页面时就会直接匹配展示的路由，我们需要将path改成 /

### 匹配模式 ###

不管Link组件的to属性值为什么，默认路由都会被匹配成功  
因为React路由在默认情况下是模糊匹配的，只要pathname以path开头就会匹配成功然后显示到页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][20210528201104508.gif_pic_center]

我们要避免此类情况的发生，将匹配模式改为精准匹配  
我们需要在Route中添加exact属性，这样就会变成精准匹配  
只有pathname和path全等时才会进行展示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20210528201324591.gif_pic_center]  
这样就完全没问题了

[20210528200334566.gif_pic_center]: /images/20221014/2c1f7ee4e8714c0d87c8b57bacc46723.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70]: /images/20221014/c98d0cb53ea9416bb421dd00718be65b.png
[20210528201104508.gif_pic_center]: /images/20221014/d68e342e03894bef93b081db4b3ff7f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 1]: /images/20221014/05993e7c7dbd456c951d8ae7e5868d5a.png
[20210528201324591.gif_pic_center]: /images/20221014/a3058eb1945a4275a9cc0742967485eb.png