关于react - router 路由的总结文档/一些注意点

# 安装路由插件

 npm add react-router-dom （最新）

 npm install react-router-dom@5 --save

# App.js组件实现切换

# 步骤

1. 导入组件

        import About from './components/About/About';

        import Home from './components/Home/Home';

       

2. 导入路由插件

        import {Link,Route} from 'react-router-dom';

       

3. 编写路由链接，功能是实现引起浏览器地址栏的变化

      <Link className="list-group-item" to="/home">Home</Link>

      <Link className="list-group-item" to="/about">About</Link>

4. 注册路由，实现路径到组件的映射，完成路由跳转

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

        <Route path="/about" component={About}></Route>

       

# 使用Router去管理Route 仅仅定义好路由还不能用，还需要路由器进行管理

    1. 使用Router(路由器)管理Route(路由)，此程序使用的是BrowserRouter

    其实，路由器管理的是路由链接Link和路由Route

    # 在index.js文件中实现路由器管理路由

    1.第一步：导入路由器 BrowserRouter

            import {BrowserRouter} from 'react-router-dom';

    2.第二步：使用路由器包裹整个应用

    <BrowserRouter>

        <App/>

    </BrowserRouter>

#react路由跳转方式

##方式1: 路由标签Link跳转

    <Link to="/user">跳转个人中心</Link>  

##方式2: 编程式导航跳转

    <button onClick={()=>{

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

    }}>

# react路由传参(3种方式)

## 1、params传参(刷新页面后参数不消失，参数会在地址栏显示)

路由页面：<Route path='/demo/:id' component={Demo}></Route>  //注意要配置 /:id

路由跳转并传递参数：

    链接方式：<Link to={'/demo/'+'6'}>XX</Link>

        或：<Link to={{pathname:'/demo/'+'6'}}>XX</Link>

获取参数：this.props.match.params.id    //注意这里是match而非history

## 2.query传参(刷新页面后参数消失)

路由页面：<Route path='/demo' component={Demo}></Route>  //无需配置

路由跳转并传递参数：

    链接方式：<Link to={{pathname:'/demo',query:{id:22,name:'张三'}}}>XX</Link>

获取参数： this.props.location.query.name

## 3.state传参( 刷新页面后参数不消失，state传的参数是加密的，比query传参好用)

注：state 传参的方式只支持Browserrouter路由，不支持hashrouter

路由页面：<Route path='/demo' component={Demo}></Route>  //无需配置

路由跳转并传递参数：

    链接方式： <Link to={{pathname:'/demo',state:{id:12,name:'dahuang'}}}>XX</Link>

获取参数： this.props.location.state.name

#.history.push

history.push方法更改当前路由，会向当前路由栈里面添加一条新的记录，跳转后点击回退可回退到当前页面

#.history.replace

history.replace方法更改当前路由，不会向当前路由栈里面添加一条新的记录，跳转后点击回退不可回退到当前页面，与他的名字一样，是直接替换当前路由

#.history.go

#withRouter 可以加工一般组件，让一般组件具备路由所特有的 API ，withRouter 返回值是一个新组件

        a. 第一步：导入withRouter函数  

                import {withRouter} from 'react-router-dom';

        b. 第二步：使用withRouter函数将一般组件包裹出来，暴露出去、

                export default withRouter(Header);

 

# 路由跳转，replace / push 区别

   push: a-b-c 可以回到上一级  

   例： this.props.history.push('路由地址')

   replace: a-b-c 回不到上一级 适用于登录后，不需要重新回到登页面

   例: this.props.history.replace('路由地址')

   

# BrowserRouter与HashRouter的区别

1. 底层原理不一样：

        BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。

        HashRouter使用的是URL的哈希值。

2. path表现形式不一样

        BrowserRouter的路径中没有#,例如：localhost:3000/demo/test

        HashRouter的路径包含#,例如：localhost:3000/#/demo/test

3. 刷新后对路由state参数的影响

        (1).BrowserRouter没有任何影响，因为state保存在history对象中。

        (2).HashRouter刷新后会导致路由state参数的丢失！！！

4. 备注：HashRouter可以用于解决一些路径错误相关的问题。（比如说之前提到的样式丢失问题）

# 关于 react-router-dom和react-router的用法以及作用

react-router-dom
    提供了 BrowserRouter, Route, Link等 API,我们可以通过 DOM 的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-Router-DOM。

react-router
    提供了一些router的核心API，包括Router, Route, Switch等，但是它没有提供 DOM 操作进行跳转的API