React Router

React Router简介:

之前版本的思想是传统的思想：路由应该统一在一处渲染， Router 4之后是这样的思想：一切皆组件

React Router包含了四个包:

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

　　　　　　　　　主要使用react-router-dom

项目引入React Router包:

　　$ yarn add react-router-dom

* Route是用来通过path路径来匹配对应的组件,一个Route组件就是一个路由的配置
* path 路由路径
* component 路由对应的组件
* render 可以渲染一个组件
* children 子组件
component / render /children 选一个使用

* component vs render vs children
1. 使用了Route并使用了component属性之后，我们的组件称之为路由组件，有路由属性【 history/location/match 】
2. 使用render的话，我们发现组件的路由属性是没有的，但是我们可以给我们的组件绑定数据了
3. 使用children的话，我们不仅可以绑定数据，也可以有路由属性
* Switch表示一次只渲染一个路由
* Redirect 重定向组件

 exact  它表示路径完全匹配  

src/LayOut文件/index.js:

import React, { Component,Fragment } from 'react'
import { Route,Switch,Redirect,withRouter } from 'react-router-dom'
import Home from './../pages/home/index';
import Recommend from './../pages/recommend/index';
import Category from './../pages/category/index';
import NotFound from './../pages/notfound/index';
/* 
  * Route是用来通过path路径来匹配对应的组件,一个Route组件就是一个路由的配置
    * path    路由路径
    * component  路由对应的组件
    * render 可以渲染一个组件
    * children 子组件
    ! component  / render /children 选一个使用
    * component vs render vs children 
       1. 使用了Route并使用了component属性之后，我们的组件称之为路由组件，有路由属性【 history/location/match 】
       2. 使用render的话，我们发现组件的路由属性是没有的，但是我们可以给我们的组件绑定数据了
       3. 使用children的话，我们不仅可以绑定数据，也可以有路由属性 
  * Switch表示一次只渲染一个路由
  * Redirect  重定向组件
  ! exact  它表示路径完全匹配      /        /home       /home/hot
*/
class LayOut extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       tabFlag: false,
       name: '西阁',
       title: {
         '/home': '首页',
         '/recommend': '推荐',
         '/category': '分类',             
       }      
    }
  }
  render() {
    return (
      <div className = "layout">
        <Switch>//懒加载
          <Redirect from = "/" to = "/home" exact/>//重定向
          <Route path = "/home" component = { Home }/>
          <Route path = "/recommend" component = { Recommend }/>
          <Route path = "/category" component = { Category }/>                
          <Route  component = { NotFound }/> 
        </Switch>
      </div>
    )
  }
}
export default withRouter( LayOut )

src/componments/tabbar

import React from 'react'
import './index.scss'
/* 
  * react-router-dom中导航跳转的组件给了两个
    * Link    用于页面跳转，但是导航不激活
    * NavLink  用于页面跳转，但是导航激活
    * Link / NavLink
      * to    Object/String 
      * NavLink有一个activeClassName属性 
*/
import { NavLink } from 'react-router-dom'
const TabBar = props => {
  const navs = [
    {
      id: 1,
      iconName: 'fa-home',
      path: '/home',
      text: '首页'
    },
    {
      id: 2,
      iconName: 'fa-hand-peace',
      path: '/recommend',
      text: '推荐'
    },
    {
      id: 3,
      iconName: 'fa-gifts',
      path: '/category',
      text: '分类'
    },
    {
      id: 4,
      iconName: 'fa-shopping-cart',
      path: '/shopcar',
      text: '购物车'
    },
    {
      id: 5,
      iconName: 'fa-user-secret',
      path: '/mine',
      text: '我的'
    }
  ]
  function renderNav () {
    return navs.map( item => (
      <li 
        key = { item.id }
      >
          <NavLink
            to = { item.path }
            activeClassName = 'active'
          >
            <i className = { 'fas ' + item.iconName }></i>
            <span> { item.text } </span>
          </NavLink>
        </li>
    ))
  }
  return (
    <footer>
      <ul>
        { renderNav() }
      </ul>
    </footer>
  )
}
export default TabBar

 

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
/* 
  * 1. React路由模式有两种： HashRouter[ #/home 传统浏览器模式 hashchange ]  BrowserRouter[ /home  h5 history模式 ]
    * BrowserRouter需要后端支持
    * as的作用是给一个模块起一个别名
*/
import { BrowserRouter as Router } from 'react-router-dom'
ReactDOM.render(
  <Router>
    <App />
  </Router>
, document.getElementById('root'));
serviceWorker.unregister();

二级路由

src/pages/home/index.js

import React, { Component } from 'react'
import './index.scss'
import Nav from './Nav'
import { Route,Redirect } from 'react-router-dom'
import Hot from './Hot';
import Comming from './Comming';
export default class Home extends Component {
  render() {
    return (
      <div className = "container">
        {/* 导航 */}
        <Nav/>
        {/* 路由展示区域 */}
        {/* <Redirect from  = "/home" to = "/home/hot" exact/> */}
        <Route path = "/home/hot" component = { Hot } />
        <Route path = "/home/comming"  component = { Comming } />
      </div>
    )
  }
}

src/pages/home/Nav.js

import React from 'react'
import { NavLink } from 'react-router-dom'
const Nav = props => {
  return (
    <div className = "nav">
      <NavLink to = "/home/hot" activeClassName = "active"> 正在热映 </NavLink>
      <NavLink to = "/home/comming" activeClassName = "active"> 即将上映 </NavLink>
    </div>
  )
}
export default Nav

src/pages/home/Hot.js

import React, { Component } from 'react'
export default class Comming extends Component {
  render() {
    return (
      <div>
        即将上映
      </div>
    )
  }
}