React-Route路由

第5章：React路由

一、SPA的理解

1. 单页Web应用（single page web application，SPA）。

2. 整个应用只有一个完整的页面。

3. 点击页面中的链接不会刷新页面，只会做页面的局部更新。

4. 数据都需要通过ajax请求获取, 并在前端异步展现。

二、路由的理解

1.什么是路由?

1. 一个路由就是一个映射关系(key:value)

2. key为路径, value可能是function或component

2. 路由分类

• 后端路由：

  • 理解： value是function, 用来处理客户端提交的请求。

  • 注册路由： router.get(path, function(req, res))

  • 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

• 前端路由：

  • 浏览器端路由，value是component，用于展示页面内容。

  • 注册路由: <Route path="/test" component={Test}>

  • 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

三、react-router-dom

1. react-router-dom的理解

• react的一个插件库。

• 专门用来实现一个SPA应用。

• 基于react的项目基本都会用到此库。

2. 相关API

• 内置组件

  • <BrowserRouter>

  • <HashRouter>

  • <Route>

  • <Redirect>

  • <Link>

  • <NavLink>

  • <Switch>

• 其它

  • history对象

  • match对象

  • withRouter函数

四、路由的的基本使用

1. 准备

• 下载react-router-dom:

  npm install --save react-router-dom@5

2. 基本使用

• 导航中的a标签改写成Link标签

  < Link to="/路径" >xxx< /Link>

• 展示区写Route标签进行路径的匹配

  < Route path = '/路径' component={组件名称}>

• < App>最外侧包裹了一个< BrowserRouter>或者< HashRouter>

• 代码

  <div className="list-group">
      {/*导航区*/}
      <Link className="list-group-item"  to="/about">About</Link>
      <Link className="list-group-item"  to="/home">Home</Link>
  </div>
  
  <div className="panel-body">
      {/* 展示区，注册路由，也就是写对应的关系 */}
      <Route path="/about"component={About}/>
      <Route path="/home"component={Home}/>
  </div>
  
  //index.js:
  ReactDOM.render(
      <BrowserRouter>
          <App />
      </BrowserRouter>
      ,document.getElementById("root"))
  

  • 注意：那么使用Link代替a标签之后，在页面上会是什么呢，我们发现其实页面上也是把link转化为了a标签

3. 路由组件和一般组件

路由组件和一般组件存在差异

• 1.写法不同：

  • 一般组件：<Demo/>
  • 路由组件：<Route path="/demo" component={Demo}/>

• 2.存放位置不同：

  • 一般组件：components
  • 路由组件：pages

• 3.接收到的props不同：

  • 一般组件：写组件标签时传递了什么，就能收到什么

  • 路由组件：接收到三个固定的属性

    

    • history:

      • go: ƒ go(n)
      • goBack: ƒ goBack()
      • goForward: ƒ goForward()
      • push: ƒ push(path, state)
      • replace: ƒ replace(path, state)

    • location:

      • pathname: "/about"

      • search: ""

      • state: undefined

    • match:

      • params: {}

      • path: "/about"

      • url: "/about"

4. NavLink 标签

NavLink 标签是和 Link 标签作用相同的，但是它又比 Link 更加强大。

在前面的 demo 展示中，你可能会发现点击的按钮并没有出现高亮的效果，正常情况下我们给标签多添加一个 active 的类就可以实现高亮的效果

• 当我们选中某个 NavLink 标签时，就会自动的在类上添加一个 active 属性

• NavLink可以实现路由链接的高亮，通过activeClassName指定样式名

• 标签体内容是一个特殊的标签属性children

• 通过this.props.children可以获取标签体内容

• 封装MyNavLink 去优化使用路由时的代码冗余的情况，代码

  • MyNavLink组件

    render() {
        // console.log(this.props);
        return (
          <NavLink
            activeClassName="xzq"
            className="list-group-item"
            {...this.props}
          />
        );
    }
    

  • 调用

    <MyNavLink to="/about" children="About" />
    <MyNavLink to="/home" children="Home" />
    

五、路由传参

1. Switch 解决相同路径问题

• 首先我们看一段这样的代码

  <Route path="/home" component={Home}></Route>
  <Route path="/about" component={About}></Route>
  <Route path="/about" component={About}></Route>
  

  这是两个路由组件，在2，3行中，我们同时使用了相同的路径 /about

  
  我们发现它出现了两个 about 组件的内容，那这是为什么呢？

  其实是因为，Route 的机制，当匹配上了第一个 /about 组件后，它还会继续向下匹配，因此会出现两个 About 组件，这时我们可以采用 Switch 组件进行包裹。

  <Switch>
      <Route path="/home" component={Home}></Route>
      <Route path="/about" component={About}></Route>
      <Route path="/about" component={About}></Route>
  </Switch>
  

• 通常情况下，path和component是一一对应的关系。

• Switch可以提高路由匹配效率(单一匹配)。匹配到一个即停止匹配

2. 解决多级路径刷新页面样式丢失的问题

当我们将路径改写成 path="/xzq/about" 这样的形式时，我们会发现当我们强制刷新页面的时候，页面的 CSS 样式消失了。这是因为，我们在引入样式文件时，采取的是相对路径，当我们使用二级路由的时候，会使得请求的路径发生改变，浏览器会向 localhost:3000/xzq 下请求 css 样式资源，这并不是我们想要的，因为我们的样式存放于公共文件下的 CSS 文件夹中。

• 解决方案：

  • 1.public/index.html 中 引入样式时不写 ./ 写 / （常用）
  • 2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用）
  • 3.使用HashRouter

  我们一般采用第一种方式去解决

3. 路由的严格匹配与模糊匹配

• 默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）

• 开启严格匹配：

  <Route exact={true} path="/about" component={About}/>

• 严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

• 默认模糊匹配（左前缀匹配规则）：
  • <MyNavLink to="/home/a/b" children="Home" />
  • <Route path={"/home"} component={Home} />

4. Redirect的使用

• 一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由

• 可以用来指定默认选中项

• 具体编码：

  <Switch>
    <Route path="/about" component={About} />
    <Route path="/home" component={Home} />
    <Redirect to="/about" />
  </Switch>
  

5. 嵌套路由

• 注册子路由时要写上父路由的path值
• 路由的匹配是按照注册路由的顺序进行的

6. 向路由组件传递参数

• params参数

  • 路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>
  • 注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>
  • 在Test组件中接收参数：this.props.match.params

• search参数

  • 路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>

  • 注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>

  • 在Test组件中接收参数：this.props.location.search

  • 备注：获取到的search是urlencoded编码字符串，需要借助querystring解析， import qs from "qs";

• state参数

  • 路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
  • 注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
  • 在Test组件接收参数：this.props.location.state
  • 备注：刷新也可以保留住参数

7. 编程式路由导航

借助this.prosp.history对象上的API对操作路由跳转、前进、后退

• this.props.history.push()

• this.props.history.replace()

• this.props.history.goBack()

• this.props.history.goForward()

• this.props.history.go()

8. BrowserRouter 与 HashRouter 的区别

• 底层原理不一样：

  • BrowserRouter使用的是H5的history API，不兼容IE9及以下版本
  • HashRouter使用的是URL的哈希值。

• path表现形式不一样

  • BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
  • HashRouter的路径包含#,例如：localhost:3000/#/demo/test

• 刷新后对路由state参数的影响

  • (1). BrowserRouter没有任何影响，因为state保存在history对象中。

  • (2). HashRouter刷新后会导致路由state参数的丢失！！！

• 备注：HashRouter可以用于解决一些路径错误相关的问题。

9. withRouter的使用

• withRouter可以加工一般组件，让一般组件具备路由组件所特有的API

• withRouter的返回值是一个新组件

• 使用方式：在一般组件中，使用暴露方式如下即可

  export default withRouter(一般组件);