React 之路由的基本使用和执行过程

1、路由介绍

现代前端应用都是 SPA （Single Page Application 单页应用程序）, 就是只有一个html页面的应用程序。 为了有效使用单个页面管理原来的多页面功能，前端路由就产生了

• 前端路由的功能： 让用户从一个页面导航到另一个页面
• 前端路由是一套 ur l路径 与 组件 的对应关系
• 使用React 路由就是配置路径和组件

2、基本使用

使用步骤：

• 安装： npm i react-router-dom
• 导入路由的三个核心组件： Router / Route / Link
• 使用 Router 组件包裹整个应用内容
• 使用 Link 定义路由
• 使用 Route 定义路由对应的组件

import React from 'react'
import ReactDOM from 'react-dom'

// 导入路由组件
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
// 定义了两个最基本的组件
const First = () => {
 return <div>页面一的内容</div>
}
const Second = () => {
 return <div>页面二的内容</div>
}
class App extends React.PureComponent {
 render () {
   return <Router>
       <div>
         {/* 使用 Link 定义两个路由 */}
         {/* to: 要跳转到的url地址 */}
         <Link to="/first">页面一</Link>
         <Link to="/second">页面二</Link>
         {/* component: url地址对应的组件 */}
         <Route path="/first" component={First}></Route>
         <Route path="/second" component={Second}></Route>
       </div>
     </Router>
 }
}

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

3、路由组件

• Router 组件： 包裹整个应用，一个 react 应用只需要一个

1. 常用两种 Router： HashRouter 和 BrowserRouter
2. （推荐）BroswerRouter 使用 history API 实现（localhost:3000/first）

• Link 组件： 用于指定导航链接，Link 组件会被编译成 a 标签，to属性会被编译成 href 地址

• Route 组件： 定义 url 展示的组件，Route 写在哪里，组件就会被渲染到哪里

4、执行过程

• 点击 Link 组件（a 标签）时，会修改浏览器url地址栏中的pathname
• 路由监听到 url 地址变化之后，得到最新的 pathname，再遍历所有的 Route 组件。使用 pathname 和 Route 中的 path（路由规则） 进行比对，找到匹配的 Route
• 当路由规则（path）能够匹配地址栏中的 pathname 时，就展示该Route 组件的内容

5、编程式导航

编程式导航就是通过js 代码来进行跳转

• history 是 React路由提供的，用于获取浏览器历史记录的相关信息
• this.props.history.push( path )：path 是要跳转到的url地址
• this.props.history.go(n)：n: 前进或者后退页面数量

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

// 登录组件， 点击 "登录" 按钮跳转到 /home
class Login extends React.Component {
  login = () => {
    //使用编程式导航实现路由跳转
    this.props.history.push('/home')
  }
  render () {
    return  (
      <div>
        账号: <input type="text" /><br />
        密码: <input type="password" /><br />
        <input type="button" value="登录" onClick={this.login} />
      </div>
    )
  }
}

// Home组件，点击 "退出" 按钮跳转回 /login
class Home extends React.Component {
  handleBack = () => {
    //this.props.history.push('/login')
     this.props.history.go(-1)
  }
  render () {
    return (
      <div>
        <button onClick={this.handleBack}>退出</button>
        这是首页
      </div>
    )
  }
}

class App extends React.Component {
  render () {
    return (
      <Router>
        {/* 指定路由入口 */}
        <Link to="/login">登录</Link>
        {/* 指定路由出口 */}
        <Routes>
          <Route path="/login" element={Login}/>
          <Route path="/home" element={Home}/>
        </Routes> 
      </Router>
    )
  }
}
ReactDOM.render(<App/>, document.getElementById('root'))

6、默认路由

目标： 浏览器地址栏是 localhost:3000/ 时，就能看到 login 页面

实现方式： 在 Route 组件配置path时，直接设置为 / 即可

<Router>
        <Routes>
	          {/* 默认路由 */}
	          <Route path="/" element={Login}/>
	          <Route path="/home" element={Home}/>
        </Routes> 
</Router>

7、匹配模式

7.1 模糊匹配

问题：当Link组件的to 属性值为”/login“时，为什么默认路由也会被匹配成功

原因：React 路由默认情况下是模糊匹配模式

模糊匹配规则：只要pathname 以 path 开头就会匹配成功

<Link to="/login">登录</Link>  
<Route path="/" element={Home}/>   

其中：path 代表Route组件的path属性
pathname 代表Link组件的 to 属性

7.2 精确匹配

问题：默认路由任何情况下都会展示，如何避免这些情况？

方法：给Route 组件添加 exact 属性，让其变为 精确匹配模式

//此时，该组件只能匹配pathname="/"这一种情况
<Route exact path="/" element=.../>