11-04-react路由基础

路由

简介

react中，使用路由的是react-router
react

• react.js 类似于vue.js web(BS构架的项目）
• react-native 简称RN 开发原生APP （android ios）

react-router

• react-router ：是下面两种的基础，浏览器和原生app的通用部分
• react-router-dom：用于浏览器端
• react-router-navtive：用于原生app

react-router-dom:
一些组件：
组件名必须大写

• < BrowserRouter/>
• < HashRouter />
• < Route />

API:

• history对象
• match对象
• location

react-router：核心
react-router-dom：浏览器中使用的路由组件库 里面已经包含了react-router核心。
react-router-native：在RN中使用。

安装路由

安装路由npm i react-router-dom

activeClassName 点击切换的样式

部分组件和API

一些组件：
    <BrowserRouter />
    <HashRouter />
    <Route />
    <Redirect />
    <Link />
    <NavLink />
    <Switch />
API：
    history对象
    match对象
    withRouter函数

在我们使用路由时，默认Props上面的就有三个东西：

history
match
location

嵌套路由

基本路由之BrowserRouter或HashRouter的使用：

< BrowserRouter /> 或 < HashRouter /> 包在根组件外面。
作用：让根组件以及所有的子组件都可以使用路由
BrowserRouter: 就是vue中的history路由模式
HashRouter: 就是vue中的hash路由模式

1）render() {
       return (
              <HashRouter>
                  <div>
                      App
                  </div>
              </HashRouter>
          );
      }
2）render() {
          return (
              <div>
                  <HashRouter>
                  App
                  </HashRouter>
              </div>
          );
      }

3）还可以在入口文件中使用。
ReactDOM.render(
        <HashRouter>
            <App />
        </HashRouter>,
      document.getElementById('root')
    )

可以给BrowserRouter或HashRouter起别名：

import { HashRouter as Router } from "react-router-dom"

使用：
  render() {
     return (
         <div>
             <Router>
             App
             </Router>
         </div>
     );
 }

< Link>的使用：

也是react-router-dom中的提供的组件，类似于vue中的router-link，是用来实现路由导航的。

<li><Link to="/home">首页</Link></li>
<li><Link to="/about">关于</Link></li>

< Route /> 设置匹配规则以及路由的出口：

在vue中，规则是写在一个单独的文件中，出口是router-view。
在react中，规则以及路由的出口在写在一起的。
< Route /> 这个组件就是用来设置规则以及提供路由的出口

 {/* 路由的出口 */}
    <Route path="/home"><Home /></Route>
    <Route path="/about"><About /></Route>

< NavLink />

< Link>组件功能比较弱，在React-router-dom中，还
提供了一个组件，叫< NavLink />。
这个< NavLink>我们可以设置点击时的样式

<NavLink className="nav-item" activeClassName="selected"  to="/home">首页</NavLink>
  <NavLink className="nav-item" activeClassName="selected"  to="/about">关于</NavLink>

封装NavLink组件：

<MyNavLink to="/about">关于</MyNavLink>

import React from "react"
import {NavLink} from "react-router-dom";

export default class MyNavLink extends React.Component{
    constructor(props) {
        super(props);
    }

    render() {
        return(
            <NavLink {...this.props} className="nav-item" activeClassName="selected"></NavLink>
        )
    }
}

NavLink好处：可以在生成路由链接基础上，如果是当前的路由的，设置激活的样式。

Switch组件

渲染第1个与当前访问地址区域的< Route>或< Redirect>。

Redirect组件

重定向路由

<Redirect path="/" to="/home"></Redirect>

对错误url处理方式有两种方式：

1）只要url错误，直接重定向到某个路由下：
    <Redirect path="*" to="/home"></Redirect>   这个path="*" 可以不写
2）需要写一个404组件，如果url匹配不到，渲染404组件
    <Route path="*" component={NotFount}></Route>

withRouter

高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.

import {withRouter} from 'react-router-dom'

路由小结

react-router-dom中提供的常用组件：
    <BrowserRouter>  as <Router>  包在APP组件最外面 这样 项目中所有的组件都可以使用路由模块中提供了组件或API了。
        有些浏览器不支持，有兼容性问题
        :3000/news   好看   看上去像是一个后端路由
        需要后端配合
    <HashRouter> as <Router> 包在APP组件最外面 这样 项目中所有的组件都可以使用路由模块中提供了组件或API了。
        兼容性更好
        :3000/#/news
        就是一个锚点，由浏览器解析
    <Route>
        设置路由的匹配规+路由的出口
        <Route path="/home" component={对应的组件}></Route>
    <Link>
        在页面上设置跳转的链接
        <Link to="/home>首页</Link>  点击时，浏览器的地址栏的url添加了/home
    <NavLink>
        在设置跳转的基础上，可以添加选中的样式。  activeClassNmae  / activeStyle
    <Switch>
        项目中路由的规则非常多，使用Switch，只会匹配到满足条件的第1个规则
        <Switch>
            <Route path="" component=""></Route>
            <Route path="" component=""></Route>
            <Route path="" component=""></Route>
            <Route path="" component=""></Route>
            <Route path="" component=""></Route>
            <Redirect></Redirect>
        </Switch>
    <Redirect>
        实现重定向
    <Prompt>
        当用户离开当前页面时做出一些提示。

react-router-dom中提供的常用三大对象：
    如果说我们使用了路由，每一个组件的props上面，就有三个东西：
        lacation
        match    parmas  获取传递的参数
        history

使用上面的知识点，可以完成：
    1）基本的路由
    2）嵌套的路由
    3）动态路由
    4）编程式路由   通过点击按钮  push  replace  go(-1)
    5）重定向
    6）404