react 路由react-router 及react-router-dom的區別

現在市面上react有不少的路由管理庫

　　react-router

　　react-router-dom

相信剛接觸的react的時候，你會因為不知道如何去選擇路由管理庫而苦惱，但是一旦你清楚了它們之間的關系這個困惑就會消失。

　　react-router 這個庫實現了路由管理的核心功能

　　react-router-dom 這個庫依賴於react-router，但是它拓展了一下在瀏覽器環境下運行的一些功能。在使用時，我們只需npm i react-router-dom即可，不需要在單獨安裝react-router

　　值得一提的是，在typescript項目中你仍需下載@types/react-router-dom，才能使用react-router-dom

一般項目中用到的路由庫，react-router-dom其實就可以勝任。它的組成其實可以分為以下兩類類

　　　　　　基於react-router的組件有：

export { MemoryRouter, Prompt, Redirect, Route, Router, StaticRouter, Switch, generatePath, matchPath, useHistory, useLocation, useParams, useRouteMatch, withRouter } from 'react-router';

　　　　　　拓展的組件有：

export { BrowserRouter, HashRouter, Link, NavLink };

我們無需去熟悉所有的組件的用處，有些組件在你開發的過程中或許很難被用到，當需要的時候再去了解也並不晚，下面我將介紹幾個常用的組件

　　　　　BrowserRouter

　　　　　　　　使用browserRouter組件后在瀏覽其中，url的路徑會是這樣的localhost:3000/home你每一次改變路由都會發送向服務器發送一次請求，如果服務其沒有配置對應路徑指定的文件，那么自然是訪問不到的，在測試環境中，當我們運行npm run start之后，webpack會給我們搭建一個后台服務，所以問們才能正確的訪問，當你打包成dist之后，如果沒有配置過服務器，是無法正確訪問路由的。　　

　　　　　HashRouter

　　　　　　　　使用hashRouter組件，url會是這樣的localhost:3000/#/home，url的改變完全是由前端去支配。localhost:3000/#/home 和localhost:3000/#/about對服務器來說都是localhost。不會因為/#/后面的地址改變而去像服務器發送請求

　　　　　Switch

　　　　　　　　路由匹配組件，確保路由的正確匹配對應的頁面

 <HashRouter>
            {/*<Switch>*/} //沒有switch /about將會匹配兩個路由，並把它們都呈現在頁面上 有switch則只會匹配一個，注意react的路由匹配規則是，誰在前誰匹配 不要把/ 放在最前方
                <Route path={'/about'} component={About}/>
                <Route path={"/about"} component={Home}/>
            {/*</Switch>*/}
        </HashRouter>

　　　　　Link

　　　　　　　　可以認為它就是一個封裝起來的a標簽，它的最終解析結果也是一個a標簽

  <Link to={'/'}>描述文字</Link>

　　　　　withRouter

　　　　　　　　將組件包含在路由， 將路由信息注入到組件的props之內，當路由發生改變的時候被包裹的組件的props也會發生改變。常見的情景就是將底部導航條Tab包裹起來，當路由發生改變的時候tab的props也會發生改變，通過在對應的生命周期內編寫邏輯，就可以實現監聽路由變化從而更新導航條組件

export let Home = withRouter(Home1) //使用withRouter 包裹組件即可

　　方法

　　　　所有嵌套在 Router BrowerRouter HashRouter 中的路由組件的props會掛載一些屬性history、location、match、staticContext

　   　　　　

　　　　我們可以通過history下面的方法去跳轉路由

 　　　　this.props.history.push("/goods");//添加頁面棧
        this.props.history.go(-1);//移除頁面棧，返回指定之前指定個數的頁面棧
        this.props.history.goBack();//移除頁面棧，返回上一個頁面棧
        this.props.history.replace('/goods');//替換頁面棧，返回上一個頁面棧

 

　　　　嵌套路由