react-router-dom的使用

=> github上的文档

react-router-dom的使用

首先下载  ## 注意下的是react-router-dom 而不是 react-router

npm install react-router-dom

yarn add react-router-dom

 路由有两种形式 :

1.BrowserRouter 是histroy模式

2.hashRouter是hash模式 

由于BrowserRouter看起来更正规 所以下面拿BrowserRouter来举例子，其实两者使用方式差不多， 下面引入的是histroy模式

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

可直接在项目的index.js中引入router，包裹住根实例，这样根实例就有了一些路由的属性和方法

// index.js

// 根实例渲染
ReactDOM.render((
    
        
    
), document.getElementById('root'));

 在配置路由组件时有两种写法

1.componnet直接写一个组件

2.render返回一个组件

exact表示完全匹配

 {
            return 
          }} />

react-router 给我们提供了两种导航:

1.Link 无论在哪里使用都会把当前的标签渲染成a标签 href指向to属性的位置

2.NavLink  是一种特殊类型的，当它的to prop匹配当前位置时，它可以给自己生成“active”的类名。同时也可以用activeClassName来自定义类名。从而可以自定义样式。

两个标签都默认渲染成a标签 如果想像Vue一样生成指定标签 可以看我的另一篇博客 实现tag重置标

TodoList  
User

 路由参数的传递 都在跳转的时候传参数

1.params 需要在路由中做配置   用match.params.id取到

2.query 无需做配置 

用location.search 取得

Active

3.state参数  

定义路由：(无需做多余的配置)

var data = {id:3,name:sam,age:36};

var path = { pathname:'/user', state:data, }

使用1.用户

2.hashHistory.push(path);

获取数据 var data = this.props.location.state; var {id,name,age} = data;

注意: state传参不会显示在地址栏中，只保存在this.props中。刷新就会变成undefined

// 传参 qs是node.js的queryString模块
let query = { name: 'Alice', age: 16 }  
Active

配置二级路由

switch表示只匹配第一次匹配到的一个路由，防止向下重复匹配

 {  // 由于User 是一个路由组件 使用接收的参数是一个路由对象 有match history location
          // 做二级路由时 为了方便维护 应该把路径名换成变量
            return (
                // 在user组件中用this.props.children来接收
                

                  type:
                   my 
                   login 
                
                  
                  {/* 配置二级路由时 使用switch 只匹配到1项 并给重定向加exact */}
                  

                  {return (
欢迎回来
)}}/>
                  {return (
还没有登录请登录
)}}/>
              
              
            )
          }}/>