react router @4 和 vue路由 详解(二)react-router @4用法

 

完整版：https://www.cnblogs.com/yangyangxxb/p/10066650.html

 

2、react-router @4用法

　　a、大概目录

　　     不需要像vue那样麻烦的用到一个单独的文件夹，react只需要在index.js中部分配置即可

 

---

 

　　b、准备工作

　　　  yarn add react-router-dom

 

　　　index.js中

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

　　　  

          <BrowserRouter>

          　　<App />

          </BrowserRouter>

　　　 这样App内部组件都可以使用

 

---

　

　　c、使用

　　     同样是上面那个例子，写法不一样：

import React, { Component } from 'react';
import {Bar} from 'components/common/ibar'

import ShopDetail from 'pages/shopDetail/shopDetail'

import NodeDe from 'pages/noteDetail/NodeDe'

import Car from 'pages/car/Car'

import Admin from 'pages/admin/Admin'

import Admin1 from 'pages/admin/Admin1'

import GoodDetail from 'pages/goodDetail/goodDetail'

import { Route, Switch, Redirect } from 'react-router-dom'

class App extends Component {
  render() {
    return (

　　　 //这里为什么要用Switch包裹呢？
　　　 //<Switch>是唯一的因为它仅仅只会渲染一个路径

      <Switch>

　　　　 //Redirect代表重定向，如果加了exact代表精准匹配

        <Redirect exact from="/" to="/home"></Redirect>
        <Route path='/home' component={Bar}/>
        <Route path="/shopDetail/:shopId/:shopName/:shopNote/:shopPic" component={ShopDetail} />
        <Route path='/noteDetail/:noteId' component={NodeDe} />
        <Route path='/goodDetail/:goodId/:shopId' component={GoodDetail} />
        <Route path='/car' component={Car} />
        <Route path='/admin' component={Admin}/>
        <Route path='/admin1/:phone' component={Admin1}/>
      </Switch>
    );
  }
}

export default App;

 

　　　　当点击哪里需要跳转的时候，在标签外面包一个<Link to= ' 路由路径 ' ></Link>　　　　     

            

　　　　动态路由/xxx/:xx，如上图

　　　　

　　　　引申1:HashRouter和BrowserRouter

　　　　　　它们两个是路由的基本，就像盖房子必须有地基一样

　　　　　　我们需要将它们包裹在最外层，我们只要选择其一就可以了。

　　　　　　现在讲它们的不同：

　　　　　HashRouter

　　　　　  如果你使用过react-router2或3或者vue-router

　　　　　  你经常会发现一个现象就是url中会有个#，

                 例如localhost:3000/#

                 HashRouter就会出现这种情况，它是通过hash值来对路由进行控制

                 如果你使用HashRouter，你的路由就会默认有这个#。

　　　　　　　  

　　　　   BrowserRouter

                 很多情况下我们则不是这种情况，我们不需要这个#

　　　　　  因为它看起来很怪，这时我们就需要用到BrowserRouter。

 

　　　　引申2：Link和NavLink的选择

　　　　　　两者都是可以控制路由跳转的，不同点是NavLink的api更多，更加满足你的需求。

　　　　     Link：主要api是to，to可以接受string或者一个object，来控制url

　　　　　　

　　

　　　　　 NavLink：它可以为当前选中的路由设置类名、样式以及回调函数等。

　　            

 

　　　　引申3:withRouter高阶组件

//引入withRouter
import {
    Link,
    withRouter
} from 'react-router-dom'

//代码结尾暴露的时候，把要暴露的组件包裹在withRouter中，做成一个高阶组件，
//将react-router 的 history,location,match 三个对象传入
//将组件包一层withRouter，就可以拿到需要的路由信息
//获取路由信息的时候this.props.location

withRouter(GoodDetail)

withRouter(connect(mapState, mapDispatch)(GoodDetail))