React react-router react-router-dom

React Router 介紹

陳柏睿 2020/10/05 09:57:15
67

React Router 介紹

在 React 中配置路由,則可以使用 react-router-dom Package。

安裝

react-router-dom

Using npm or yarn

$ npm install --save react-router-dom

# or

$ yarn add react-router-dom

 

API 用法

<BrowserRouter>

原理是使用 HTML5 History API 讓 UI 與 URL 能夠同步。使用 react-router-dom 為 Project 設置路由,第一步則需要使用 <BrowserRouter> 將要使用路由的 JSX 包起來,被包起來的區域都可以使用 react-router-dom 所提供的功能 (包含 Child Component 也作用)。

props

basename (string)
所有位置的基本 URL。如果 Application 部署在 Server 的子目錄,則需要將其設置為子目錄。正確格式應以斜槓開頭,但是不能以斜槓結尾。

<BrowserRouter basename="/prefix">
  <App />
</BrowserRouter>

 

<Route>

<Route> 組件主要是為 UI 設置相對應的 Path。當 Path 符合當前的 URL 則 Render 指定的 UI。若兩個 <Route> 設置相同的 Path,則兩者都會 Render。

說明:<Route> 父層是 <Switch>,儘管有兩個相同的 Path,但是也只 Render 第一個 <Route> Path 的 UI。

props

path (string) (string[])
設置 <Route> 的 Path,同時也支援多條 Path 的設置。

// 單一路徑
<Route path="/page-a" />

// 多條路徑
<Route path={['/users/:id', '/profile/:id']}>

exact (boolean)
當設置為 true,則解析若 URL 與 <Route> 設置的 Path 完全相符才會 Render 指定的 UI。

strict (boolean)
當設置為 true,則會嚴格解析 URL 包含斜槓的部分是否與 <Route> 設置的 Path 完全相符。例如:若要檢查一個 URL 不該帶有斜槓結尾,則需要將 exact 和 strict 都設為 true。

sensitive (boolean)
當設置為 true,則會檢查 URL 和 <Route> 設置的 Path 大小寫是否相符。

// exact
<Route path="/page-a" exact />

// exact strict 搭配使用
<Route path="/page-a" exact strict />

// sensitive
<Route path="/PageA" sensitive />

component (React.Component)
透過這個屬性傳入一個組件,若當前的 URL 與 <Route> 設置的 Path 相符,則 Render 該組件。

<Route path="/page-a" component={PageA} />

render (function)
透過這個屬性則可以直接將想要 Render 的內容寫入,若當前的 URL 與 <Route> 設置的 Path 相符,則會 Render 內容。

<Route path="/page-a" render={() => <h1>PageA</h1>} />

 

<Link>

路由連結組件。react router 會 Create 一個 Anchor tag,並阻止 Anchor tag 的 Default 設置,處理自己的 Click。

props

to (string)
連結的字串表示形式,也可以將 location 的 pathnamesearchhash 連在一起使用。

<Link to="/home">首頁</Link>

to (object)

  • pathname (string):路由連結的路徑。
  • hash (string):網址的 Hash 值,例如:#submit。
  • search (string):Query parameters,例如:?quick-submit=true。
  • state (object):可透過 state 利用路由傳遞 data。
<Link to={{
  pathname: '/login',
  hash: '#submit',
  search: '?quick-submit=true',
  state: { action: 'login' }
}}>
  登入
</Link>

to (funtion)
使用 location 當作參數傳遞給該函數,該函數需要 return String 或是 Objcet。

<Link to={location => ({ ...location, pathname: "/login" })} />

<Link to={location => `${location.pathname}?sort=name`} />

component (React.Component)
若想使用自己的連結組件 (Component) 則可以透過這個屬性設置。

<Link to="/login" component={CustomLink}>登入</Link>

 

<NavLink>

和 <Link> 一樣是連結功能,不一樣的地方則是它會在與當前 URL 符合時,為其呈現元素新增樣式屬性。

props

exact (boolean)
當設置為 true,則解析若 URL 與連結完全相符才會新增樣式屬性。

strict (boolean)
當設置為 true,則會嚴格解析 URL 包含斜槓的部分是否與連結完全相符,若相符才會新增樣式屬性。

<NavLink exact strict to="/profile">個人頁</NavLink>

activeClassName (string)
若 URL 與連結相符合,則會提供 activeClassName,Default 值 (className) 為 active,可以自行設定 activeClassName

<NavLink to="/home" activeClassName="nav__link--active">首頁</NavLink>

activeStyle (object)
可以透過這個屬性直接撰寫 Style,若 URL 與連結相符合,則會應用此 Style。

<NavLink
  to="/home"
  activeStyle={{
    backgroundColor: '#F1F1F1',
    color: '#BEBEBE'
  }}
>
  首頁
</NavLink>

 

<Switch>

用於 Render 與路徑 Match 的第一個 <Route> 或 <Redirect>

<Switch>
  <Route path="/page-a" component={PageA} />
  <Route path="/page-b" component={PageB} />
  <Route path="/page-c" component={PageC} />
</Switch>

 

<Redirect>

Render <Redirect> 則會重定向到指定的位置。

props

to (string)
設置重定向的 URL。

<Redirect to="/home" />

to (object)
可使用物件進行設置。

<Redirect
  to={{
    pathname: "/login",
    search: "?quick-submit=true",
    state: { referrer: currentLocation }
  }}
/>

from (string)
只有在 <Switch> 內才能使用這個 props,且需要和 to 搭配使用。若 URL 與 from 設置的 Path 完全相符,則會重定向 to 設置的 Path。

<Redirect from="/" to="/login" />

exact (boolean)
當設置為 true,則解析若 URL 與 from 設置的 Path 完全相符才會重定向 to 設置的 Path。

strict (boolean)
當設置為 true,則會嚴格解析 URL 包含斜槓的部分是否與 from 設置的 Path 完全相符。

sensitive (boolean)
當設置為 true,則會檢查 URL 和 from 設置的 Path 大小寫是否相符。

// exact
<Redirect exact from="/" to="/home" />

// strict
<Redirect strict from="/" to="/home" />

// sensitive
<Redirect sensitive from="/" to="/home" />

push (boolean)
當設置為 true,重定向會將新路徑 Push 至歷史記錄 (history stack),而不是 Replace。

<Redirect push to="/home" />

 

<Prompt>

用於當路由 (Route) Redirect 之前跳確認提示框。

使用情境:
當應用程式進入一個應該阻止使用者導航的狀態時 (比如表單只填寫了一半),彈出一個提示。

說明:由於行動裝置 (Mobile Device) 不支援 WindowEventHandlers.onbeforeunload,因此在行動裝置上不起作用。

when (boolean)
用於控制是否運行 <Prompt> 組件。

message (string)
<Prompt> 組件的提示文字。

<Prompt when={true} message="您確定要離開當前頁面嗎?" />

 

Route Props

history

  • push:使用 history push 連結進行導頁。
props.history.push({ pathname: '/login' });
  • replace:單純替換路由,將不會把路由 Push 至歷史記錄 (history stack)。(A 頁使用 replace 導頁至 B 頁,點擊 Browser 上一頁則不會回到 A 頁路由)

  • action:操作路由的當前動作 (PUSH、REPLACE、POP)。

 

location

表示 Application 現在所在的位置。

  • hash:回傳 URL 的 Hash 值。
  • key:此位置的唯一字符串。
  • pathname:回傳 URL 的路徑。
  • search:回傳 URL 的 Query parameters。
  • state:儲存在路由中的 State。
// 透過 props 取得 location
props.location

=> location: {
  hash: "#submit"
  key: "vza2o7"
  pathname: "/login"
  search: "?quick-submit=true"
  state: {action: "login"}
}

match

  • url:回傳目前網址列上的 URL。
  • path:回傳當前進入的 <Route> 設置的 Path。
  • params:動態路由的參數。
  • isExact:回傳當前 URL 與當前進入的 <Route> 設置的 Path 是否 Match。
// 透過 props 取得 match
props.match

=> match: {
  isExact: true,
  params: {
    userId: 19930210
  },
  path: '/profile/:userId',
  url: '/profile/19930210'
}

 

withRouter

在 react-router-dom 中,只有通過 <Route> Render 的 Component 才能直接透過 props 來取得 historylocationmatch,該 Component 所嵌套的 Child Component 並無法直接透過 props 取得,因為 react-router-dom 不會將 historylocationmatch 向下傳遞。

若要在不是透過 <Route> Render 的 Component 中取得 historylocationmatch,則可以使用 withRouter

withRouter 是一個 higher-order-component (HOC),Render 時會將 historylocationmatch 當作 props 傳入 Component。

import React from 'react';
import { widthRouter } from 'react-router-dom';

class SampleComponent extends React.Component {
  render () {
    return <p>SampleComponent</p>;
  }
}

export default widthRouter(SampleComponent);

 

參考資料

react-router 官方文件

陳柏睿