【React入门必备知识篇05】--- React 路由基础

前言	❤️ 被人理解的感觉，就是有人提着灯笼，照见蹲在黑暗角落的你 ❤️

一、React 路由基础

（1）React路由介绍

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

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

---

（2）路由的基本使用

2.1 使用步骤

1️⃣ 安装： yarn add react-router-dom，如果没有安装yarn工具的，需要先全局安装一下yarn：npm install -g yarn

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

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

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

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

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

<Link to="/first">页面一</Link>

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

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

完整代码演示如下：

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

/* 
  react-router-dom 的基本使用：
  1 安装： yarn add react-router-dom
*/

// 2 导入组件：
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

const First = () => <p>页面一的内容</p>

// 3 使用Router组件包裹整个应用
const App = () => (
	<Router>
	    <div>
			<h1>React路由基础</h1>
      		{/* 4 指定路由入口 */}
      		<Link to="/first">页面一</Link>

      		{/* 5 指定路由出口 */}
      		<Route path="/first" component={First} />
    	</div>
  	</Router>
)

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

2.2 常用组件说明

• Router组件： 包裹整个应用，一个React应用只需要使用一次
  • 两种常用的Router： HashRouter和BrowserRouter
  • HashRouter： 使用URL的哈希值实现 （localhost:3000/#/first）
  • 推荐 BrowserRouter：使用H5的history API实现（localhost3000/first）
• Link组件： 用于指定导航链接（a标签）
  • 最终Link会编译成a标签，而to属性会被编译成 a标签的href属性

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

• Route组件： 指定路由展示组件相关信息
  • path属性：路由规则，这里需要跟Link组件里面to属性的值一致
  • component属性：展示的组件
  • Route写在哪，渲染出来的组件就在哪

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

完整代码演示如下：

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

/* 
  常用组件说明
*/

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

const First = () => <p>页面一的内容</p>

// 使用Router组件包裹整个应用
const App = () => (
  	<Router>
    	<div>
      		<h1>React路由基础</h1>
      	<div>
        	{/* 指定路由出口 */}
        	<Route path="/first" component={First} />
      	</div>
      		{/* 指定路由入口 */}
      		<Link to="/first">页面一</Link>
    	</div>
  	</Router>
)

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

---

（3）路由的执行过程

1. 当我们点击Link组件的时候，修改了浏览器地址栏中的url；
2. React路由监听地址栏url的变化；
3. React路由内部遍历所有的Route组件，拿着Route里面path规则与pathname进行匹配；
4. 当路由规则（path）能够匹配地址栏中的 pathname 时，就展示该 Route 组件的内容；

完整代码演示如下：

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

/* 
  路由的执行过程
*/

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

const First = () => <p>页面一的内容</p>
const Home = () => <h2>这是Home组件的内容</h2>

// 使用Router组件包裹整个应用
const App = () => (
    <Router>
        <div>
            <h1>React路由基础</h1>
            <div>
                {/* 指定路由出口 */}
                <Route path="/first" component={First} />
                <Route path="/home" component={Home} />
            </div>
            {/* 指定路由入口 */}
            <Link to="/first">页面一</Link>
            <br />
            <Link to="/home">首页</Link>
        </div>
    </Router>
)

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

---

（4）编程式导航

• 场景：点击登陆按钮，登陆成功后，通过代码跳转到后台首页，如何实现？
• 编程式导航：通过JS代码来实现页面跳转
• history是React路由提供的，用于获取浏览器历史记录的相关信息；
• push(path)：跳转到某个页面，参数path表示要跳转的路径；
• go(n)：前进或后退功能，参数n表示前进或后退页面数量（比如：-1 表示后退到上一页）；

完整代码演示如下：

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

/* 
  编程式导航
*/

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

class Login extends React.Component {
    handleLogin = () => {
        // 使用编程式导航实现路由跳转
        // ...省略其他功能代码
        this.props.history.push('/home')
    }
    render() {
        return (
            <div>
                <p>登录页面：</p>
                <button onClick={this.handleLogin}>登录</button>
            </div>
        )
    }
}

const Home = props => {
    const handleBack = () => {
        // go(-1) 表示返回上一个页面
        props.history.go(-1)
    }
    return (
        <div>
            <h2>我是后台首页</h2>
            <button onClick={handleBack}>返回登录页面按钮</button>
        </div>
    )
}

const App = () => (
    <Router>
        <div>
            <h1>编程式导航：</h1>
            <Link to="/login">去登录页面</Link>

            <Route path="/login" component={Login} />
            <Route path="/home" component={Home} />
        </div>
    </Router>
)

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

---

（5）默认路由

• 现在的路由都是通过点击导航菜单后展示的，如果进入页面的时候就主动触发路由呢
• 默认路由：表示进入页面时就会匹配的路由
• 默认路由：只需要把path设置为 '/'

<Route path="/" component={Home} />

---

（6）匹配模式

6.1 模糊匹配模式

• 问题：当Link组件的to属性值为 ‘/login’ 时候，为什么默认路由也被匹配成功？
• 默认情况下，React路由是模糊匹配模式；
• 模糊匹配规则：只要pathname以path开头就会匹配成功；
• path 代表Route组件的path属性；
• pathname 代表Link组件的to属性（也就是 location.pathname）；

完整代码演示如下：

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

/* 
  模糊匹配模式
*/

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

const Home = () => <p>进入页面的时候，你能看到我吗？</p>
const Login = () => <p>我是Login组件的内容</p>

const App = () => (
    <Router>
        <div>
            <h1>默认路由</h1>
            <Link to="/first/a/b/c">登录页面</Link>

            {/* 默认路由 */}
            <Route path="/" component={Home} />
            <Route path="/first" component={Login} />
        </div>
    </Router>
)

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

6.2 精确匹配

• 默认路由认可情况下都会展示，如果避免这种问题？
• 给Route组件添加 exact 属性，让其变为精准匹配模式；
• 精确匹配：只有当path和pathname完全匹配时才会展示改路由；

完整代码演示如下：

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

/* 
  模糊匹配模式
*/

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

const Home = () => <p>进入页面的时候，你能看到我吗？</p>
const Login = () => <p>我是Login组件的内容</p>

const App = () => (
    <Router>
        <div>
            <h1>默认路由</h1>
            <ul>
                <li>
                    <Link to="/">首页</Link>
                </li>
                <li>
                    <Link to="/login">登录页面</Link>
                </li>
            </ul>

            {/* 默认路由，添加 exact 属性，就会让当前路由变为精确匹配 */}
            <Route exact path="/" component={Home} />
            <Route path="/login" component={Login} />
        </div>
    </Router>
)

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

推荐：给默认路由添加 exact 属性；

---

（7）React 路由基础小结

1. React 路由可以有效的管理多个视图（组件）实现 SPA；
2. Router 组件包裹整个应用，只需要使用一次；
3. Link组件是入口，Route组件是出口；
4. 通过 props.history 实现编程式导航；
5. 默认模糊匹配，添加 exact 变精确匹配；
6. React 路由的一切都是组件，可以像思考组件一样思考路由；

---

二、总结

由于内容较多，所以我决定分开写啦，我会坚持一直更新呢！喜欢的朋友们记得点点赞哦！