React中路由的使用

一、路由的介绍

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

前端路由是一套映射规则，在React中，是 URL路径 与组件的对应关系
使用 React 路由简单来说就是：配置路径和组件（配对)

二、路由的基本使用

    1、下载包
    npm i react-router-dom@5.3.0
    注意!!!这里我们是使用的5.3.0版本的,目前最新版的已经更新到6.0版本
    这个包提供了三个核心的组件:HashRouter, Route, Link
   2、导入包
    import { HashRouter, Route, Link } from 'react-router-dom'
    使用HashRouter包裹整个应用，一个项目中只会有一个Router
   3、使用Link指定导航链接
   使用`Route`指定路由规则(哪个路径展示哪个组件)
   
   import React from 'react'
   import ReactDom from 'react-dom'
   import { HashRouter, Route, Link } from 'react-router-dom'
   import Search from './pages/Search.jsx'
   import Comment from './pages/Comment.jsx'
   export default function App () {
      return (
        <div>
          <h1>react路由基本使用</h1>
          <HashRouter>
            <Link to="/comment">评论</Link>
            <Link to="/search">搜索</Link>

            <Route path="/comment" component={Comment} />
            <Route path="/search" component={Search} />
          </HashRouter>
        </div>
      )
    }
    ReactDom.render(<App />, document.getElementById('root'))
    
    
    两种常用 Router：`HashRouter` 和 `BrowserRouter`

-   HashRouter：使用 URL 的哈希值实现（<http://localhost:3000/#/first>）

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

-   （推荐）BrowserRouter：使用 H5 的 history.pushState() API 实现（<http://localhost:3000/first>）

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

3、Navlink和link的区别

Link

Link组件最终会渲染成a标签，用于指定路由导航

to属性，将来会渲染成a标签的href属性
Link组件无法展示哪个link处于选中的效果

NavLink

NavLink组件，一个更特殊的Link组件，可以用用于指定当前导航高亮

格式：

<NavLink to="/xxx" activeClassName="active">链接</NavLink>

说明：

to属性，用于指定地址，会渲染成a标签的href属性
activeClassName: 用于指定高亮的类名，默认active。一般不去修改。
exact: 精确匹配，表示必须地址栏和to的属性值 精确匹配类名才生效

总结:

1 link和NavLink都用来做路由跳转。它们都用属性来指定跳转地址

2 link和NavLink的区别是，NavLink指向的路径会自带一个名为 active类名