完整版：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))

完整版：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))