HashRouter、BrowserRouter、Route、Link、HashRouter和BrowserRouter的區別；

 

1.安裝react-router-dom

   1.1  在項目命令行中，執行
npm install react-router-dom-S
下載到生產環境依賴中。

2.路由內置組件

HashRouter  
表示一個路由的跟容器，將來所有跟路由相關的東西，都要包裹在HashRouter中，一個網站中，只需要使用一次HashRouter就好了。

Link
表示一個路由的連接；

Route
表示一個路由規則；

render(){
        return (
            <HashRouter>
                <div>
                    <h1>這是網站的根目錄</h1>
                    <hr />
                    <Link to="/new">首頁</Link>&nbsp;&nbsp;
                    <Link to="/movie/">新聞</Link>&nbsp;&nbsp;
                    <Link to="/about">關於我們</Link>
                    <hr />
                    <Route path="/home" component={HOME} ></Route><hr/>
                    <Route path="/new" component={New} exact></Route><hr/>
                    <Route path="/about" component={About}></Route><hr/>
                </div>
            </HashRouter>
        );
    }

 

由Route創建的標簽，就是路由規則，其中path表示要匹配的路由，component表示要展示的組件。
Route具有兩種身份：
1.它是一個路由匹配規則；
2.它是一個占位符，表示將來匹配到的組件都放到這個位置
注意：

Link to屬性的地址也是/開頭，Link在頁面渲染的是a標簽；
Route 組件path地址是以/開頭 ，配置component屬性，是顯示的組件，這個屬性不可以大寫；

3.嵌套路由

嵌套路由：在路由組件中，使用Link，Route，配置子路由，實現跳轉，切換；
下面為一級路由，在一級路由New為路由組件

<Route path="/new" component={ New }></Route>

 render (){
       return(
           <React.Fragment>
          《新聞》
          <ul>
              <li>
                  <Link to="/new/act">今日聚焦</Link>
              </li>
              <li>
                  <Link to="/new/three">三農信息</Link>
              </li>
              <li>
                  <Link to="/new/week">新聞周刊</Link>
              </li>
          </ul>
          <Route path="/new/act" component={Act}></Route>
          <Route path="/new/three" component={Three}></Route>
          <Route path="/new/week" component={Week}></Route>
          
           </React.Fragment>
       )
    }

 

4.帶參數路由和獲取參數

通過配置路由的地址，在Link跳轉時

    Route path路徑后面 /:id （key）
    Link to 路徑后面 /top/10 （value）
  接收傳值：
     class類組件，this.props.match.params.屬性名
         函數組件：形參.match.params.屬性名
   代碼實例：

render(){
        return (
            <HashRouter>
                <div>
                    <h1>網站根目錄</h1>
                    <hr />
                    <Link to="/about/add/5497">關於我們</Link>&nbsp;&nbsp;
                    <hr />
                    <Route path="/about/:type/:id" component={Movie} exact></Route>
                </div>
            </HashRouter>
        );
    }

 

在Route內置組件中，配置path地址

<Route path="/about/:type/:id" component={Movie}></Route>

//在Link內置組件中，配置to屬性，進行跳轉：

<Link to="/about/active/5497"></Link>

//類組件中通過聲明周期進行接收this.props傳遞過來的數據

render(){
console.log(this);
return (
<div>
電影--{this.props.match.params.type}--{this.props.match.params.id}
</div>
);
}

5.  HashRouter和BrowserRouter的區別

React-Router 是建立在 history 之上的，常見的history路由方案有三種形式，分別是：

• hashHistory
  • hashHistory 使用 URL 中的 hash（#）部分去創建路由，舉例來說，用戶訪問http://www.example.com/，實際會看到的是http://www.example.com/#/。
• browserHistory
  • browserHistory 是使用 React-Router 的應用推薦的 history方案。它使用瀏覽器中的 History API 用於處理 URL，創建一個像example.com/list/123這樣真實的 URL
  • 當刷新頁面時，瀏覽器會向服務器請求，服務器實際會去找根目錄下對應的文件，發現找不到，因為實際上我們的服務器並沒有這樣的 物理路徑/文件 或沒有配置處理這個路由，所有內容都是通過React-Router去渲染React組件，自然會報404錯誤。
• createMemoryHistory
  • Memory history 不會在地址欄被操作或讀取。這就解釋了我們是如何實現服務器渲染的。同時它也非常適合測試和其他的渲染環境（像 React Native ）。和另外兩種history的一點不同是你必須創建它，這種方式便於測試。

兩種解決方法

• 使用hashHistory，不用做額外處理
• 使用browserHistory，服務器需要進行相關路由配置
  方法見這里