react路由

现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体
验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由
应运而生。
前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）
前端路由是一套映射规则，在React中，是 URL路径 与 组件 的对应关系
使用React路由简单来说，就是配置 路径和组件（配对）

<!-- 2.使用步骤 -->
1. 安装：yarn add react-router-dom
2. 导入路由的三个核心组件：Router / Route / Link
3. 使用 Router 组件包裹整个应用（重要）
4. 使用 Link 组件作为导航菜单（路由入口）
5. 使用 Route 组件配置路由规则和要展示的组件（路由出口）

    // 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'))

<!-- 3.常用组件说明 -->
Router 组件：包裹整个应用，一个 React 应用只需要使用一次
两种常用 Router：HashRouter 和 BrowserRouter
HashRouter：使用 URL 的哈希值实现（localhost:3000/#/first）
（推荐）BrowserRouter：使用 H5 的 history API 实现（localhost:3000/first）

Link 组件：用于指定导航链接（a 标签）
    // to属性：浏览器地址栏中的pathname（location.pathname）
    <Link to="/first">页面一</Link>

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

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

<!-- 5.编程式导航 -->
history 是 React 路由提供的，用于获取浏览器历史记录的相关信息
push(path)：跳转到某个页面，参数 path 表示要跳转的路径
go(n)： 前进或后退到某个页面，参数 n 表示前进或后退页面数量（比如：-1 表示后退到上一页）

    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'))

<!-- 6. 默认路由 -->
默认路由：表示进入页面时就会匹配的路由
默认路由path为：/
<Route path="/" component={Home} />

<!-- 7.模糊匹配模式 -->
默认情况下，React 路由是模糊匹配模式
模糊匹配规则：只要 pathname 以 path 开头就会匹配成功

// path 代表Route组件的path属性
// pathname 代表Link组件的to属性（也就是 location.pathname）
    / (path)    所有 pathname  (能够匹配的pathname)
    /first (path)    /first 或 /first/a 或 /first/a/b/…  (能够匹配的pathname)

<!-- 8. 精确匹配 -->
给 Route 组件添加 exact 属性，让其变为精确匹配模式
精确匹配：只有当 path 和 pathname 完全匹配时才会展示该路由
推荐：给默认路由添加 exact 属性。
    // 此时，该组件只能匹配 pathname=“/” 这一种情况
    <Route exact path="/" component=... />