React Router 介紹
React Router 介紹
在 React 中配置路由，則可以使用 react-router-dom Package。
安裝
react-router-dom
$ 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 的 pathname、search、hash 連在一起使用。
<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 來取得 history、location、match，該 Component 所嵌套的 Child Component 並無法直接透過 props 取得，因為 react-router-dom 不會將 history、location、match 向下傳遞。
若要在不是透過 <Route> Render 的 Component 中取得 history、location、match，則可以使用 withRouter。
withRouter 是一個 higher-order-component (HOC)，Render 時會將 history、location、match 當作 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);
