带你走进React路由的世界

Posted 2021-06-22 David凉宸

介绍

对路由进行管理。在传统的没有使用路由情况下，通过读取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进行包裹

 <Router>
        <div className="app">
          <h1>5555555</h1>
        </div>
      </Router>

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

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

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

 <div>
            <Route path="/first" component={First}></Route>
            <Route path="/two" component={Two}></Route>
</div>

演示：

完整代码：

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开头就会匹配成功然后显示到页面

我们要避免此类情况的发生，将匹配模式改为精准匹配
我们需要在Route中添加exact属性，这样就会变成精准匹配
只有pathname和path全等时才会进行展示


这样就完全没问题了