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

时间:2022-06-12 19:32:31

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

2、react-router @4用法

  a、大概目录

       react router @4 和 vue路由 详解(二)react-router @4用法不需要像vue那样麻烦的用到一个单独的文件夹,react只需要在index.js中部分配置即可


  b、准备工作

     yarn add react-router-dom

   index.js中

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

   

          <BrowserRouter>
            <App />
          </BrowserRouter>
    这样App内部组件都可以使用
 

 
  c、使用
       同样是上面那个例子,写法不一样:
react router @4 和 vue路由 详解(二)react-router @4用法
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;
react router @4 和 vue路由 详解(二)react-router @4用法

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

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

    动态路由/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

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

  

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

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

    引申3:withRouter高阶组件

react router @4 和 vue路由 详解(二)react-router @4用法
//引入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))
react router @4 和 vue路由 详解(二)react-router @4用法