React學習(二)：React-router學習筆記

React-router學習筆記

簡單實例

1. create-react-app name

   創建React腳手架，方便簡單應用。

2. 設想簡單頁面，左側爲導航，右側是網頁的頭部、內容區域、尾部。

3. src目錄如下

   • components // 放置組件
   • css // 放置css文件
   • routers // 放置router配置文件
   • views // 放置頁面文件
     • content
     • layout
     • login
   • App.js // 網頁整體框架
   • index.js

   ……

4. 開始動手～每次敲代碼的時候總覺得不知道從哪裏開始，大概還是敲得不夠多吧？

   首先是將佈局寫好，通過flex佈局將整體結構寫好。

   [外鏈圖片轉存失敗(img-e46A2Li3-1562136202068)(https://s2.ax1x.com/2019/07/03/ZYDdwq.png)]

其次，在index.js中添加最外層的路由<BrowserRouter>，它的原理是使用HTML5 history API（pushState，replaceState、popState）來使你的內容隨着url動態改變。

⚠️PS：

HashRouter和BrowserRouter這兩個是路由的基本，必須將他們包裹在最外層，但只需要根據自己的需要選擇其一就可以了。HashRouter主要是通過hash值對路由進行控制。

// index.js 主要代碼
ReactDOM.render(
    <BrowserRouter>
        <Switch>
            {
                indexRouter.map((route) => {
                    return <Route key={ route.path } path={ route.path } exact={route.exact || false} component={route.component} />
                })
            }
        </Switch>
        {/* <App /> */}
    </BrowserRouter>, 
    document.getElementById('root')
);

// indexRouter.js
import App from '../App'
import Login from '../views/login/Login'
import ForgetPassword from '../views/login/ForgetPassword'

export const indexRouter = [
    {
        path: '/forgetpassword',
        exact: true,
        component: ForgetPassword
    },
    {
        path: '/login',
        exact: true,
        component: Login
    },
    {
        path: '/',
        exact: false,
        component: App
    }
]

通過簡單的路由配置，現在只需要在相應的頁面編寫代碼，既可以在瀏覽器的地址欄嘗試路由跳轉了。

⚠️PS：

在這裏需要注意exact參數，它是一個boolean值，true代表需要精確匹配path和location.pathname，假如使用了true，而又出現了路由跳轉了但頁面沒有渲染的情況，則應該檢查一下path有沒有寫錯了。

這裏配置的路由既可以讓頁面進行重新佈局，假如是在佈局中對路由進行設置，頁面就只會進行局部刷新了。

5. 接下來我們對首頁的側邊欄設置路由，讓它控制右邊的內容區域進行刷新。

   // App.js主要代碼
   function App(props) {
     return (
       <div className="app-box">
         <aside className="aside-box">
           <menu>
             <ul>
               {
                   navRouter.map((route, index) => {
                       return (
                           <li>
                               <NavLink to={ route.path } key={ index } exact={ route.exact }>{ route.title }</NavLink>
                           </li>
                       )
                   })
               }
             </ul>
           </menu>
         </aside>
         <div className="layout-box">
           <Header />
           <section>
               <Switch>
                   {
                       navRouter.map((route) => {
                           console.log(props)
                           return <Route path={ `${props.match.path}${route.path}` } key={ route.key } exact={ route.exact } component={ route.component } />
                       })
                   }
                   <Redirect to='/home' />
               </Switch>
           </section>
           <Footer />
         </div>
       </div>
     );
   }
   

   可以看到，側邊欄區域設置路由跳轉、在內容區域配置了路由，這樣，當點擊左邊側邊欄的區域時，就可以只對內容區域進行更新了。例如：我點擊生活、工作等頁面，內容區域就會顯示對應頁面的內容了。這裏還用到了一個組件，主要是對url進行重新跳轉，可以看到此時首頁的’/‘會變更爲’/home’。

6. 在這個簡單的例子中，我主要是用了、、、這幾個簡單的組件，這也是react-router中最常見的組件，通過這幾者的配合使用就可以實現react簡單的路由跳轉了。

誤解

一開始看React-router的時候一直不知道怎麼使用，也分不清楚Route和Link有什麼區別，而且還不知道怎麼纔可以重新開寫佈局，以爲路由跳轉只能進行局部頁面的刷新。通過自己寫一個簡單的例子，其實就會對這些常用的組件有比較好的認識了，同時也知道了這些常見的組件如何使用。當然，React-router還有很多別的用法需要我再去一一探討～

總結

React-router

它提供了router一些核心的api，包括Router、Swith、Route等，但它沒有提供dom操作進行調整的api。

React-router-dom

它提供了BrowerRouter、Link、Route等api，我們可以通過DOM事件控制路由。這裏需要注意，如果你使用的環境是Native環境，則需要導入React-router-native包。若是在瀏覽器上運行，則導入dom該包。

React-router-dom常見組件

HashRouter和BrowerRouter

Router（保持UI和URL的一致）主要分這兩種：HashRouter和BrowerRouter，它們用於包裹在應用的最外層，選擇其中一種就可以了，就像房子的地基一樣，缺少了它們就無法進行路由操作了。

• HashRouter

  Url中會出現一個‘#’，通過Hash值進行路由控制，如果選擇了這種模式，那麼路由中就會默認有這個‘#’。

• BrowerRouter

  它的Url中不會存在’#’，它的原理是使用HTML5 history API（pushState，replaceState、popState）來使你的內容隨着url動態改變。

Route

它是Router的子元素，用來控制Url對應顯示的組件。經常用到的參數有：exact、path、component等。常配合Link使用。

• exact

  用於判斷是否需要精確的匹配path和location.pathname。

• path

  決定路由調整的路徑。

• component

  決定需要顯示的組件。

Link和NavLink

Link

通過to屬性決定跳轉的路徑。

NavLink

可以給當前匹配成功的Url提供一個className，常在Tab導航中使用，表示當前的鏈接。

Swith

它常用於包裹Route，裏面不能放其它元素，用來只顯示一個路由。

來源

1. 一探究竟瞭解React-router 4簡易教學

   http://www.ucamc.com/e-learning/javascript/278-%E7%B0%A1%E5%96%AE%E4%BB%8B%E7%B4%B9%E4%BA%86%E8%A7%A3react-router-4%E6%95%99%E5%AD%B8.html

2. ReactRouter4學習筆記(二)：API

   https://www.ruphi.cn/archives/273/