react-router4入門教程

npm包的區別

首先從react-router的npm包開始看起，分別有react-router和react-router-dom，二者的區別在於後者具備一些dom api，好比Link、BrowserRouter、HashRouter。不難發現react-router-dom具備一些在瀏覽器上所須要的api，而react-router只有核心api，因此咱們總結下

• react-router 路由核心功能包
• react-router-dom 在瀏覽器上使用的react路由
• react-router-native 在app上使用的react路由

其中react-router-dom和react-router-native都繼承自react-router，因此咱們在瀏覽器上開發只須要引入react-router-dom便可

react-router-dom api詳解

我最早接觸的框架是vue，vue中的路由配置使用的是配置文件，而react使用的是jsx來配置路由，因此初次學習會有點彆扭。

HashRouter和BrowserRouter

其實就是路由的hash和history兩種模式（要是不瞭解這兩種模式之間的區別那就須要去惡補下啦）
而且這兩個組件是路由的容器，必須在最外層

// hash模式
ReactDom.render(
	<HashRouter>
      	<Route path="/" component={Home}/>
    </HashRouter>
)

// history模式
ReactDom.render(
	<BrowserRouter>
      	<Route path="/" component={Home}/>
    </BrowserRouter>
)
複製代碼

下面說說HashRouter和BrowserRouter上的參數

• basename 路由的基礎連接，用來部署到非根目錄下，好比你須要將項目部署到 www.xxxx.com/web 下，則設置basename="/web"
• getUserConfirmation 用來攔截Prompt組件，而且決定是否跳轉
• forceRefresh 用來設置是否強制瀏覽器總體刷新，默認值爲false
• keLength 用來設置location.key的長度，默認是6，能夠自定義

Prompt

Prompt是用來提示用戶是否要跳轉，給用戶提示信息默認使用window.confirm，能夠結合getUserConfirmation構建自定義提示信息

<Prompt message={location => {
    return '請確認'
}}/>

若是直接返回true，則不會彈窗
複製代碼

Route

Route是路由的一個原材料，它是控制路徑對應顯示的組件

Route的參數

• path 跳轉的路徑
• component 對應路徑顯示的組件
• render 能夠本身寫render函數返回具體的dom，而不須要去設置component
• location 傳遞route對象，和當前的route對象對比，若是匹配則跳轉
• exact 匹配規則，true的時候則精確匹配。

path	url	是否開啓	匹配結果
/a	/a/b	false	yes
/a	/a/b	true	no

• sensitive 是否區分path的大小寫

path	url	是否開啓	匹配結果
/a	/a	true	yes
/a	/A	true	yes

• strict 是否匹配後面的/

path	url	是否開啓	匹配結果
/a	/a/	true	yes
/a	/a/c	true	yes
/a	/a	true	no

Router

低級路由，適用於任何路由組件，主要和redux深度集成，使用必須配合history對象
使用Router路由的目的是和狀態管理庫如redux中的history同步對接

<Router history={history}>
    ...
</Router>
複製代碼

Link和NavLink

二者都是跳轉路由，NavLink的參數更多些

Link的api

• to 有兩種寫法，表示跳轉到哪一個路由
  • 字符串寫法

    <Link to="/a"/>
    複製代碼

  • 對象寫法

    <Link to={{
      pathname: '/courses',
      search: '?sort=name',
      hash: '#the-hash',
      state: { fromDashboard: true }
    }}/>
    複製代碼

• replace 就是將push改爲replace
• innerRef 訪問Link標籤的dom

NavLink的api

• Link的全部api
• activeClassName 路由激活的時候設置的類名
• activeStyle 路由激活設置的樣式
• exact  參考Route，符合這個條件纔會激活active類
• strict  參考Route，符合這個條件纔會激活active類
• isActive 接收一個回調函數，active狀態變化的時候回觸發，返回false則中斷跳轉

const oddEvent = (match, location) => {
  console.log(match,location)
  if (!match) {
    return false
  }
  console.log(match.id)
  return true
}
<NavLink isActive={oddEvent} to="/a/123">組件一</NavLink>
複製代碼

• location 接收一個location對象，當url知足這個對象的條件纔會跳轉

<NavLink to="/a/123" location={{ key:"mb5wu3", pathname:"/a/123" }}/>
複製代碼

Redirect

Redirect重定向很簡單，咱們直接看代碼便可

// 基本的重定向
<Redirect to="/somewhere/else" />

// 對象形式
<Redirect
  to={{
    pathname: "/login",
    search: "?utm=your+face",
    state: { referrer: currentLocation }
  }}
/>

// 採用push生成新的記錄
<Redirect push to="/somewhere/else" />

// 配合Switch組件使用，form表示重定向以前的路徑，若是匹配則重定向，不匹配則不重定向
<Switch>
  <Redirect from='/old-path' to='/new-path'/> <Route path='/new-path' component={Place}/> </Switch> 複製代碼

Switch

路由切換，只會匹配第一個路由，能夠想象成tab欄
Switch內部只能包含Route、Redirect、Router

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>
複製代碼

withRouter

當一個非路由組件也想訪問到當前路由的match,location,history對象，那麼withRouter將是一個很是好的選擇，能夠理解爲將一個組件包裹成路由組件

import { withRouter } from 'react-router-dom'
const MyComponent = (props) => {
    const { match, location, history } = this.props
     return (
        <div>{props.location.pathname}</div>
    )
}
const FirstTest = withRouter(MyComponent);
複製代碼

history對象

用過vue的都知道，vue-router有組件形式的導航，也有編程式導航，那react-router怎麼使用api來控制前進後退和刷新呢？這就須要咱們來講明下history對象的做用了

其實在每一個路由組件中咱們可使用this.props.history獲取到history對象，也可使用withRouter包裹組件獲取，
在history中封裝了push，replace，go等方法，具體內容以下

History {
    length: number;
    action: Action;
    location: Location;
    push(path: Path, state?: LocationState): void; // 調用push前進到一個地址,能夠接受一個state對象，就是自定義的路由數據
    push(location: LocationDescriptorObject): void; // 接受一個location的描述對象
    replace(path: Path, state?: LocationState): void; // 用頁面替換當前的路徑，不可再goBack
    replace(location: LocationDescriptorObject): void; // 同上
    go(n: number): void; // 往前走多少也頁面
    goBack(): void; // 返回一個頁面
    goForward(): void; // 前進一個頁面
    block(prompt?: boolean | string | TransitionPromptHook): UnregisterCallback;
    listen(listener: LocationListener): UnregisterCallback;
    createHref(location: LocationDescriptorObject): Href;
}
複製代碼

這樣咱們想使用api來操做前進後退就能夠調用history中的方法啦

參考文檔

• reacttraining.com/react-route…
• www.jianshu.com/p/c6fad9831…