什么是React-router

实现单页面应用的方式  只用一个页面的应用  SPA

下载模块

cnpm install react-router-dom  --save

引入路由模块

import    {

        BrowserRouter  as Router ，              //as  给当前的模块起别名

        Route，                                                //根据路由匹配出口

        Link                                                        //Link等同于 <a>标签

  } from  "react-router-dom"               

exact

<Router> 

        <Link to="/"></Link>

        <Route path="/" exact  component={index}/>

</Router>

精准的匹配"/"根路径在Route中使用;

当没有使用精准匹配的情况下路由跳转时将组件(界面)和根路径的组件(界面)同时导出

配置路由

import React, {Component}from 'react';//引入react模块

import {

    BrowserRouter as Router,                   //路由

    Route,                                                  //匹配路由输出输出对应的组件

    Link ,                                                   //链接跳转的路由地址

    Redirect                                                //重定向路由跳转

}from "react-router-dom";                        //引入react-router路由模块

import Homefrom "../home/Home";        //引入创建好的Home组件

import Listfrom "../List/List";                    //引入创建好的List组件

class Appextends Component {

    render() {

            return (

                    <Router>      

                              <div>

                                    {/*路由连接 GET传值*/}

                                    <Link to="/home?id=1"></Link>

                                    {/*路由跳转 动态传值*/}

                                    <Link  to="/list/1"></Link>

                                    {/*重定向路由连接   具备to属性 当路由匹配到根路径"/" 重定向路由会将路由更改为"/home"*/}

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

                                    {/*路由匹配*/}

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

                                    <Route path="/list/:id" component={List}/>

                            </div>

                        </Router>

                            );

                     }

}

export default App;

GET传值

语法：<Link  to="/路径?参数"></Link>           

<Link to="/home?id=1"></Link>    <Link to="/home?id=2"></Link>          <Link to="/home?id=3"></Link>

语法：<Route path="/路径"    component={需要跳转到的组件}/>

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

获取GET路由的传递的值

在Route配置路由的组件内  this.prop.location.search   获取路由传递的值

动态传值

语法：<Link  to="/路径/参数"></Link>       

<Link  to="/list/1"></Link>              <Link  to="/list/2"></Link>                 <Link  to="/list/3"></Link>  

语法：<Route path="/路径/:属性名"    component={需要跳转到的组件}/>

<Route path="/list/:id" component={List}/>

获取动态路由的传递的值

在Route配置路由的组件内  this.prop.match.params.属性名 获取路由传递的值

通过 js 跳转

this.props.history.push("/path")        //path  路由     React自属性跳转的时候不闪屏不刷新     React推荐使用此方式跳转

window.location.href="/a"              //跳转到a路由       JS location跳转时会闪白屏刷新

Router共两种模式

1.BrowserRouter：浏览器路由方式

2.HashRouter    ：hash方式锚点路由地址栏以#号形式跳转

SPA单页面的特点， 优点 ，缺点

特点：

    加载次数少，加载以后性能高

优点：

    一个系统只加载一次资源，之后的操作交互，数据交互是通过路由，ajax来进行，页面并没有刷新

缺点：

1.第一次加载可能会慢

2.单页面应用会复杂一点

3.不利于SEO

4.WEBAPP  返回键操作相对复杂

嵌套路由怎么实现

Router配置好一个路由之后，在组件中又配置一个路由，为二级嵌套路由