React 路由

安装：yarn add react-router-dom@5.3.0

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

const App = () => {
  return (
    <Router>
    {/* 使用 Router 组件包裹整个应用 */}
      <div className="App">
        <ul>
          <li>
            {/* 使用 Link 组件作为导航菜单（路由入口） */}
            <Link to="/first">页面一</Link>
          </li>
        </ul>        
        {/* 使用 Route 组件配置路由规则和要展示的组件（路由出口） */}
        <Route path="/first" component={First}></Route>
      </div>
    </Router>
 	)
}

Router 模式

HashRouter

原理：监听 window 的 hashchange 事件来实现

BrowserRouter

原理：监听 window 的 popstate 事件来实现

Link&NavLink组件

Link组件：用于指定导航链接，会渲染成 a 标签，to 属性会渲染成 href 属性

NavLink组件：可以在路由匹配时获得一个高亮类名

• activeClassName 属性：用于指定高亮的类名，默认 active
• exact属性：精准匹配，表示必须精确匹配，类名才生效

// 默认情况，模糊匹配

Route组件

用来配置路由规则

• path属性：指定路由规则
• component属性：指定要渲染的组件
• children子节点：指定要渲染的组件

// 如果路由规则匹配成功，那么，就会渲染对应组件；否则，渲染 null 或者说不渲染任何内容

// 如果 Route 组件没有 path 属性，表示：该路由永远匹配成功，一定会渲染该组件

路由执行过程

1. 点击 Link 组件（a标签），修改了浏览器地址栏中的 url
2. React 路由监听到地址栏 url 的变化 hashchange popstate
3. React 路由内部遍历所有 Route 组件，使用路由规则（path）与 pathname（hash）进行匹配
4. 当路由规则（path）能够匹配地址栏中的 pathname（hash） 时，就展示该 Route 组件的内容