React Router

React Router

官网地址:https://reacttraining.com/react-router/web/api/Route

React Router 4版面以后有巨大的变化 4后的思想是：一切皆组件（路由写成组件）
之前的版本都是传统思想：路由应该统一在一处渲染（类似vue里的路由表）

React Router包含四个包

• react-router：React Router核心API
• react-router-dom：React Router 的DOM绑定，在浏览器中运行不需要额外安装react-router
• react-router-native：React Native 中使用，实际应用中不会使用这个
• react-router-config：静态路由配置

React中主要使用react-router-dom

React Router使用

1. 安装
   • npm i react-router-dom
2. 在react项目中找到入口文件(src下的index.js文件)，这个个文件中引入react-router-dom
   • import {BrowserRouter as Router} from "react-router-dom"

     • as的作用是给一个模块起一个别名

       • 使用as就可以
       • 不用as就这样写
     • React Router 路由有两种模式
       1. HashRouter
          • 写法：[#/home]传统浏览器模式 hashchange事件
       2. BrowserRouter
          • 写法：[/home]h5 的history模式

          • 注意：BrowserRouter 需要后端支持

     • index.js代码(项目入口文件index.js文件)

       import ReactDom from 'react-dom'
       import {BrowserRouter as Router} from "react-router-dom"
       import App from "./App.js"
       
       ReactDom.render(
           <Router>
               <App/>
           </Router>,
           document.getElementById('root')
       )
       

3. 配置路由
   • 在Layout文件夹(组件入口文件)下的index.js中配置路由
   • 先引入import {Route,Switch,Redirect} from "react-router-dom"
     • 在react-router-dom包中需要引入三个东西
     • react-router-dom

       • Route：是用来通过path路径来匹配对应路径的组件
       • Switch：表示一次之渲染一次路由
       • Redirect：重定向组件
         !!exact 表示路径完全匹配

   • Router
     • path 路由路径
     • component 路由对应组件
     • render 可以渲染一个组件
     • children 子组件
     • component / render / children 这三个先其中一个使用
     • 路由渲染组件三种写法
       • • 优点：这种路由组件，在组件中有路由属性
         • 缺点：不能在组上写属性了
       • }>
         • 优点：可以在组件中传属性
         • 缺点：该组件没有路由属性
       • }>
         • 既可以传属性，又有路由属性
     • 示例

       <Switch>
       	{/* 页面重定向*/}
          <Redirect from="/" to="/home" exact></Redirect>
          {/* 页面路由 */}
           <Route path="/home" component={Home}></Route>
           <Route path="/login" component={Login}></Route>
           {/* 下面是错误路由匹配404页面 */}
           <Route  component={NotFount}></Route>
       </Switch>
       

   • 使用代码如下

     //初始页面
     import React,{Component} from "react"
     import {Route,Switch,Redirect} from "react-router-dom"
     //引入路径
     import Home from "../pages/home"
     import Login from "../pages/login"
     import NotFount from "../pages/not_found"
     
     /**
      * Route是用来通过path路径来匹配对应路径的组件
      *  *path         路由路径
      *  *component    路由对应组件
      *  *render       可以渲染一个组件
      *  *children     子组件
      * ！！component /  render / children  这三个先其中一个使用
      * 
      * Switch表示一次之渲染一次路由
      * Redirect重定向组件
      * ！！ exact 表示路径完全匹配
      */
     export default class Layout extends Component{
         render(){
             return(
                 <div>
                     <Switch>
                         <Redirect from="/" to="/home" exact></Redirect>
                         {/**/}
                         <Route path="/home" render ={()=>{<Home name={this}/>}></Route>
                         <Route path="/login" component={Login}></Route>
                         <Route  component={NotFount}></Route>
                     </Switch>
                 </div>
             )
         }
     }
     

二级路由

就是在对应的一级路由页面下写路由
代码
Home.jsx页面

<Route path="/home/hot" component={Home}></Route>
<Route path="/home/add" component={Home}></Route>

解决有些组件没有路由属性

当我们在在一个组件里想用路由属性时，给组件不是路由组件怎么办
这是我们就需用引入withRouter高阶组件
引入方式和使用如下

import { NavLink,Route,Switch,Redirect,withRouter } from 'react-router-dom'

//初始页面
import React,{Component} from "react"
import {Route,Switch,Redirect,withRouter } from "react-router-dom"
//引入路径
import Home from "../pages/home"
import Login from "../pages/login"
import NotFount from "../pages/not_found"


 class Layout extends Component{
    render(){
        return(
            <div>
                <Switch>
                    <Redirect from="/" to="/home" exact></Redirect>
                    {/**/}
                    <Route path="/home" render ={()=>{<Home name={this}/>}></Route>
                    <Route path="/login" component={Login}></Route>
                    <Route  component={NotFount}></Route>
                </Switch>
            </div>
        )
    }
}
export default withRouter(Layout)//用法
//这样Layout组件就有路由属性了

以上是路由配置

路由的使用（跳转）

路路由跳转使用需要从react-router-dom 中解构出NavLink
import { NavLink} from 'react-router-dom'

• 具体使用
  History products

NavLink属性参数

• to(string)：匹配路径
• activeClassName(string)：设置选中样式，默认值为active
• activeStyle(object)：当元素被选中时，为此元素添加样式
• exact(bool)：为true时，只有当导致和完全匹配class和style才会应用
• strict(bool)：为true时，在确定为位置是否与当前URL匹配时，将考虑位置pathname后的斜线
• isActive(func)判断链接是否激活的额外逻辑的功能

// activeClassName选中时样式为selected
<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>
 
// 选中时样式为activeStyle的样式设置
<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
>FAQs</NavLink>
 
// 当event id为奇数的时候，激活链接
const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}
 
<NavLink
  to="/events/123"
  isActive={oddEvent}
>Event 123</NavLink>

• 传参
  to={{pathname:`/要跳转的路径`,state:{key:val}}
• 在跳转页面接收
  this.props.location.state.key

js路由跳转

this.props.history.push('/child02')

query传参

this.props.history.push({pathname:"/home",query:{id:1,name:lisi}})

使用this.props.location.query接收参数