React-router-dom

API

<BrowserRoute>

<Router> 使用 HTML5 提供的 history API (pushState, replaceState 和 popstate 事件) 來(lái)保持 UI 和 URL 的同步。

• basename: string
  • 當(dāng)前位置的基準(zhǔn)URL。如果你的頁(yè)面部署在服務(wù)器的二級(jí)（子）目錄，你需要將 basename 設(shè)置到此子目錄。 正確的 URL 格式是前面有一個(gè)前導(dǎo)斜杠，但不能有尾部斜杠。

<HashRouter>

HashRouter 使用 URL 的 hash (例如：window.location.hash) 來(lái)保持 UI 和 URL 的同步。

<Router>

• 當(dāng)存在服務(wù)區(qū)來(lái)管理動(dòng)態(tài)請(qǐng)求時(shí)，需要使用<BrowserRouter>組件，而<HashRouter>被用于靜態(tài)網(wǎng)站
• 所有路由器組件的通用接口，使用時(shí)<Router>標(biāo)簽只能包含一個(gè)子標(biāo)簽，一般Router放在元素標(biāo)簽最頂部，只需使用包括
  • <BrowserRouter>
  • <HashRouter>

<Route path='/roster'/>
// 當(dāng)路徑名為'/'時(shí), path不匹配
// 當(dāng)路徑名為'/roster'或'/roster/2'時(shí), path匹配
// 當(dāng)你只想匹配'/roster'時(shí)，你需要使用"exact"參數(shù)
// 則路由僅匹配'/roster'而不會(huì)匹配'/roster/2'
<Route exact path='/roster'/>

<Route>

渲染

當(dāng)匹配到對(duì)應(yīng)的路徑時(shí)，呈現(xiàn)相應(yīng)的頁(yè)面

• Route渲染頁(yè)面的三種方法
  • component ：一個(gè)React組件。當(dāng)帶有component參數(shù)的route匹配成功后，route會(huì)返回一個(gè)新的元素，其為component參數(shù)所對(duì)應(yīng)的React組件（使用React.createElement創(chuàng)建）

  <Route path='/page' component={Page} />
  

  • render ： 一個(gè)返回React element的函數(shù)。當(dāng)匹配成功后調(diào)用該函數(shù)。該過(guò)程與傳入component參數(shù)類(lèi)似，并且對(duì)于行級(jí)渲染與需要向元素傳入額外參數(shù)的操作會(huì)更有用。

  <Route path='/page' render={(props) => (
      <Page {...props} data={extraProps}/>
  )}/>
  

  • children ： 一個(gè)返回React element的函數(shù)。與上述兩個(gè)參數(shù)不同，無(wú)論route是否匹配當(dāng)前l(fā)ocation，其都會(huì)被渲染

  <Route path='/page' children={(props) => (
      props.match
          ? <Page {...props}/>
          : <EmptyPage {...props}/>
  )}/>
  

嵌套路由

• /roster?：對(duì)應(yīng)路徑名僅僅是/roster時(shí)，因此需要在exact元素上添加exact參數(shù)。

• /roster/:number?：?該路由使用一個(gè)路由參數(shù)來(lái)獲取/roster后的路徑名。

<Switch>
      <Route exact path='/roster' component={FullRoster}/>
      <Route path='/roster/:number' component={Player}/>
</Switch>

路徑參數(shù)

• 如'/roster/:number'中:number這種寫(xiě)法意味著/roster/后的路徑名將會(huì)被獲取并存在match.params.number中。例如，路徑名'/roster/6'會(huì)獲取到一個(gè)對(duì)象：

const Player = (props) => {

  const number = props.match.params.number;
  return (
    <div>
      <h1>參數(shù)：{number}</h1>
    </div>
)

<Link>

提供路由跳轉(zhuǎn)和導(dǎo)航，顯示在html中就是a標(biāo)簽

• to: string
  • 需要跳轉(zhuǎn)到的路徑(pathname)或地址（location）
• to: object
  • 需要跳轉(zhuǎn)到的地址（location）
• replace: bool
  • 默認(rèn)為false
  • 當(dāng)設(shè)置為 true 時(shí)，點(diǎn)擊鏈接后將使用新地址替換掉訪(fǎng)問(wèn)歷史記錄里面的原地址
  • 當(dāng)設(shè)置為 false 時(shí)，點(diǎn)擊鏈接后將在原有訪(fǎng)問(wèn)歷史記錄的基礎(chǔ)上添加一個(gè)新的紀(jì)錄。

<NavLink>

特殊版本的<Link>,當(dāng)需要設(shè)置導(dǎo)航點(diǎn)擊，匹配當(dāng)前路由樣式時(shí)，使用該組件

• activeClassName：string
  • 設(shè)置匹配當(dāng)前路由時(shí)的a標(biāo)簽類(lèi)名，默認(rèn)類(lèi)名是class='active'
• activeStyle: object
  • 設(shè)置匹配當(dāng)前路由時(shí)的a標(biāo)簽樣式
• exact: bool
  • 默認(rèn)是false,設(shè)置為true則只有完全匹配時(shí)才能應(yīng)用activeClassName和activeStyle

<Switch>

History

Location

JS控制路由跳轉(zhuǎn)及傳參

this.props.history.push({
            pathname: '/order-detail',//路由
            state: {
                orderNo: params //傳參
            },
        });

//接受參數(shù)
let orderNo = this.props.location.state.orderNo