使用react-router-dom路由 | react入門記錄(二)

使用方法

  • 在入口文件(這里是index.js)中加入如下代碼
import { HashRouter, Route, Switch }from 'react-router-dom';
  • 在原來的基礎(chǔ)上加入路由配置<HashRouter>...<HashRouter/>
<div className="App">
      <Header />
      // start
      <HashRouter>
          <Switch>
              <Route exact path="/" component={Index} />
              <Route exact path="/suc" component={Suc} />
          </Switch>
     </HashRouter>
    // end
 </div>
  • 輸入//suc即可切換不同的頁面

相關(guān)知識(shí)

  • react-routerreact-router-dom異同
  1. react-router: 實(shí)現(xiàn)了路由的核心功能;
  2. react-router-dom: 基于react-router,加入了在瀏覽器運(yùn)行環(huán)境下的一些功能,例如:Link組件,會(huì)渲染一個(gè)a標(biāo)簽,Link組件源碼a標(biāo)簽行; BrowserRouterHashRouter組件,前者使用pushStatepopState事件構(gòu)建路由,后者使用window.location.hashhashchange事件構(gòu)建路由;
  3. react-router-dom依賴react-router
  • <HashRouter>
    使用 URL 的 hash (例如:window.location.hash) 來保持 UI 和 URL 的同步;
  • <BrowserRouter>
    使用 HTML5 提供的 history API 來保持 UI 和 URL 的同步;
  • <Switch>
    用于渲染與路徑匹配的第一個(gè)子 <Route><Redirect>。它的獨(dú)特之處是獨(dú)它僅僅渲染一個(gè)路由。相反地,每一個(gè)包含匹配地址(location)的<Route>都會(huì)被渲染。
    <Switch>尋找到匹配的<Route>之后將停止尋找匹配并渲染該<Route>
  • exact
    精準(zhǔn)匹配。如果為 true,則只有在位置完全匹配時(shí)才應(yīng)用激活類/樣式。
    例如在開始到例子中,只有/suc才會(huì)匹配成功,/suc/test則不會(huì)。

TIPS

  • <...Router>組件下只能有一個(gè)根目錄
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容