React中的路由(react-Router)基本配置

基本使用

通过指定监听模式
    + BrowserRouter history模式 http://www.baidu.com/home
    + HashRouter hash模式 http://www.baidu.com/#/home
通过Link修改路由URL地址
通过Route匹配路由地址

 <HashRouter>
   {/*
     2.Link作用:
      用于修改URL的资源地址
   */}
   <Link to={'/home'}>Home</Link>
   <Link to={'/about'}>About</Link>
    {/*
       3.Route作用:
       用于维护URL和组件的关系
       Route是一个占用组件, 将来它会根据匹配到的资源地址渲染对应的组件
     */}
    <Route path={'/home'} component={Home}/>
    <Route path={'/about'} component={About}/>
</HashRouter>

路由注意点

react-router4之前, 所有路由代码都是统一放到react-router中管理的
react-router4开始, 拆分为了两个包react-router-dom和react-router-native
    + react-router-dom 在浏览器中使用路由
    + react-router-native 在原生应用中使用路由

BrowserRouter history模式使用的是H5的特性, 所以兼容性会比HashRouter hash模式差一些
在企业开发中如果不需要兼容低级版本浏览器, 建议使用BrowserRouter； 如果需要兼容低级版本浏览器, 那么只能使用HashRouter；无论是Link还是Route都只能放到BrowserRouter和HashRouter中才有效；
默认情况下路由会从上至下匹配所有的Route, 只要匹配都会显示，但是在企业开发中大部分情况下, 我们希望的是一旦有一个匹配到了后续就不要再匹配了，此时我们就可以通过Switch来实现

class App extends React.PureComponent{
    render(){
        return (
            <div>
                {/*设置监听模式*/}
                <BrowserRouter>
                    {/*修改路由地址*/}
                    <Link to={'/home'}>Home</Link>
                    <Link to={'/about'}>About</Link>
                    {/*维护URL和组件关系*/}
                    <Route path={'/home'} component={Home}/>
                    <Route path={'/about'} component={About}/>
                </BrowserRouter>
            </div>
        )
    }
}

Link注意点

默认情况下Link会渲染成一个a标签, 如果想渲染成其他的元素, 可以通过手动路由跳转来实现

NavLink注意点

默认情况下Route在匹配资源地址时, 是模糊匹配；如果必须和资源地址一模一样才匹配, 那么需要添加exact属性, 开启精准匹配 

class App extends React.PureComponent{
    render(){
        return (
            <div>
                <BrowserRouter>
                    {/*
                    Link注意点:
                    默认情况下Link会渲染成一个a标签,
                    如果想渲染成其他的元素, 可以通过手动路由跳转来实现
                    */}
                    <Link to={'/home'}>Home</Link>
                    <Link to={'/home/about'}>About</Link>
                    {/*
                    NavLink注意点:
                    NavLink在匹配路由的时候, 是利用当前资源地址从左至右的和path中的地址进行匹配的
                    只要当前资源地址从左至右完整的包含了path中的地址那么就认为匹配
                    当前资源地址 : /home/about
                    to中的地址: /home
                    to中的地址: /home/about
                    */}
                    {/*
                    <NavLink exact to={'/home'} activeStyle={{color:'red'}}>Home</NavLink>
                    <NavLink exact to={'/home/about'} activeStyle={{color:'red'}}>About</NavLink>
                    */}
                    {/*
                    Route注意点:
                    Route在匹配路由的时候, 是利用当前资源地址从左至右的和path中的地址进行匹配的
                    只要当前资源地址从左至右完整的包含了path中的地址那么就认为匹配
                    当前资源地址 : /home/about
                    path中的地址: /home
                    path中的地址: /home/about
                    */}
                    <Route exact path={'/home'} component={Home}/>
                    <Route exact path={'/home/about'} component={About}/>
                </BrowserRouter>
            </div>
        )
    }
}

export default App;

import React, {Component} from 'react'
import {HashRouter, Switch, Route, Redirect} from 'react-router-dom'
import asyncComponent from '@/utils/asyncComponent'
const login = asyncComponent(() => import("@/pages/login/login"))
const profile = asyncComponent(() => import("@/pages/profile/profile"))
const info = asyncComponent(() => import("@/pages/info/info"))
const setUser = asyncComponent(() => import("@/pages/set_user/set_user"))
const msite = asyncComponent(() => import("@/pages/msite/msite"))
const shop = asyncComponent(() => import("@/pages/shop/shop"))
const food = asyncComponent(() => import("@/pages/food/food"))
const technology = asyncComponent(() => import("@/pages/technology/technology"))

export default class RouteConfig extends Component {
  render () {
    return (
      <HashRouter>
        <Switch>
          <Route path="/profile" exact component= {profile}/>
          <Route path="/login" component= {login}/>
          <Route path="/info"  component= {info}/>
          <Route path="/msite" component= {msite}/>
          <Route path="/setuser"  component= {setUser}/>
          <Route path="/shop/:id"  component= {shop}/>
          <Route path="/food/:geohash/:id/:title"  component= {food}/>
          <Route path="/technology"  component= {technology}/>
            <Redirect exact from='/' to='/profile'/>
          <Route component= {profile}/>
        </Switch>
      </HashRouter>
    )
  }
}

withRouter

作用：把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上，默认情况下必须是经过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用编程式导航的写法，执行this.props.history.push('/detail')跳转到对应路由的页面；然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，此时就可以使用this.props。
例如：app.js这个组件，一般是首页，不是通过路由跳转过来的，而是直接从浏览器中输入地址打开的，如果不使用withRouter此组件的this.props为空，没法执行props中的history、location、match等方法。

路由参数传递

url传参：?key=value&key=value
路由参数(动态路由)：/path/:key

路由统一管理

利用renderRoutes实现路由集中管理

// App.js

import React from 'react';
import {NavLink, withRouter} from 'react-router-dom';
import {renderRoutes} from 'react-router-config';
import routers from './router/index';

class App extends React.PureComponent{
    render(){
        let obj = {
            name:'lnj',
            age:18,
            gender:'man'
        };
        return (
            <div>
                <NavLink to={'/home?name=lnj&age=18'} activeStyle={{color:'red'}}>Home</NavLink>
                <NavLink to={'/about/lnj/18'} activeStyle={{color:'red'}}>About</NavLink>
                <NavLink to={{
                    pathname: "/user",
                    search: "",
                    hash: "",
                    state: obj
                }} activeStyle={{color:'red'}}>User</NavLink>
                <NavLink to={'/discover'} activeStyle={{color:'red'}}>广场</NavLink>
                <button onClick={()=>{this.btnClick()}}>广场</button>

                {renderRoutes(routers)}
            </div>
        )
    }
    btnClick(){
        this.props.history.push('/discover');
    }
}

export default withRouter(App);

// router.js

import Home from '../components/Home'
import About from '../components/About'
import Other from '../components/Other'
import User from '../components/User'
import Login from '../components/Login'
import Discover from '../components/Discover'
import {Hot, TopList, PlayList} from '../components/Discover';

const routers = [
    {
        path:'/home',
        exact:true,
        component: Home
    },
    {
        path:'/about/:name/:age',
        exact:true,
        component: About
    },
    {
        path:'/user',
        exact:true,
        component: User
    },
    {
        path:'/login',
        exact:true,
        component: Login
    },
    {
        path:'/discover',
        component: Discover,
        routes:[
            {
                path:'/discover',
                exact:true,
                component: Hot,
            },
            {
                path:'/discover/toplist',
                exact:true,
                component: TopList,
            },
            {
                path:'/discover/playlist',
                exact:true,
                component: PlayList,
            },
        ]
    },
    {
        component: Other
    },
];
export default routers;

// Discover.js

import React from 'react';
import {NavLink, Switch, Route} from "react-router-dom";
import {renderRoutes} from 'react-router-config';
import routers from '../router/index';

export function Hot() {
    return (
        <div>推荐</div>
    )
}
export function TopList() {
    return (
        <div>排行榜</div>
    )
}
export function PlayList() {
    return (
        <div>歌单</div>
    )
}

class Discover extends React.PureComponent{
    render(){
        return (
            <div id={'discover'}>
                <NavLink exact to={'/discover'} activeStyle={{color:'red'}}>推荐</NavLink>
                <NavLink exact to={'/discover/toplist'} activeStyle={{color:'red'}}>排行榜</NavLink>
                <NavLink exact to={'/discover/playlist'} activeStyle={{color:'red'}}>歌单</NavLink>
                <button onClick={()=>{this.btnClick()}}>歌单</button>
                {/*以下是2B铅笔写法, 企业开发中千万不要这么写*/}
                {/*{renderRoutes(routers[4].routes)}*/}
                {/*
                注意点: 如果当前组件是通过renderRoutes创建的, 那么系统过就会自动给这个组件传递一个route对象
                */}
                {renderRoutes(this.props.route.routes)}
            </div>
        )
    }
    btnClick(){
        // this.props.history.push('/discover/playlist');
        console.log(this.props.route);
    }
}

export default Discover;