React学习(二)——react中的路由

React 学习

React 路由

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

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

React 路由使用

1. 安装依赖

npm i react-router-dom
## 或者
yarn add react-router-dom

2. 导入路由组件

// 使用 H5 的 history API 实现（localhost:3000/first）
import {
    BrowserRouter as Router, Route, Link } from "react-router-dom";
// 使用 URL 的哈希值实现（localhost:3000/#/first）
import {
    HashRouter as Router, Route, Link } from "react-router-dom";

• React 路由有两种模式：
  1. 使用哈希值实现（hash）： HashRouter
  2. 使用 H5 中的 history API： BrowserRouter（推荐）

3. 使用 Router 包裹应用

整个应用使用一次即可！也就是用 Router 包裹整个应用

<Router>
    <div>.....</div>
</Router>

4. 使用 Link 组件定义导航菜单

这个组件最终会被渲染成一个 a 标签

to 属性表示：浏览器地址栏中的 pathname（location.pathname）

<Link to="/home">主页</Link>

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

• Route 组件：配置路由规则以及要展示的组件
  • path 属性表示：路由规则
  • component 属性表示：该路由规则匹配时要展示的组件

Route 组件放在页面中哪个位置，那么，组件的内容就会展示在哪个地方

// 定义一个Home组件
const Home = () => <h1>这是主页</h1>
// 匹配到的路由显示对应的组件内容
<Route path="/home" component={Home}></Route>

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

// 定义两个组件
const Home = () => <h1>这是主页</h1>;
const Login = () => <h1>这是登录页</h1>;

class Hello extends React.PureComponent {
   
    render() {
   
        return (
            <Router>
                <div>
                    <Link to="/home">主页</Link>
                    <br />
                    <Link to="/login">登录页</Link>
                    <Route path="/home" component={
   Home} />
                    <Route path="/login" component={
   Login} />
                </div>
            </Router>
        );
    }
}

路由执行过程

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 表示后退到上一页）

• 组件中通过 props 来获取到路由信息

  • 对于函数组件来说就是通过 参数 props 来获取
  • 对于类组件来说，就是通过 this.props 来获取

// 改造上面的Home组件
const Home = props => {
   
    console.log(props);
    return (
        <div>
            <h1>这是主页</h1>
            <button
                onClick={
   () => {
   
                    props.history.go(-1);
                }}
            >
                返回上一页
            </button>
            <button
                onClick={
   () => {
   
                    props.history.push("/login")<