React-router5.x 路由的使用及配置

在 React router 中通常使用的組件有三種：

• 路由組件（作為根組件）: BrowserRouter（history模式） 和 HashRouter（hash模式）
• 路徑匹配組件: Route 和 Switch
• 導航組件: Link 和 NavLink

關於路由組件，如果我們的應用有服務器響應web的請求，建議使用<BrowserRouter>組件; 如果使用靜態文件服務器，建議使用<HashRouter>組件

1. 安裝

npm install react-router-dom

2. 實例

import React, { Component, Fragment } from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter, Route } from 'react-router-dom';
import store from './store';
import Header from './common/header';
import Home from './pages/home';
import Detail from './pages/detail';
import Login from './pages/login';


class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Fragment>
          <BrowserRouter>
            <div>
              <Header />
              <Route path='/' exact component={Home}></Route>
              <Route path='/login' exact component={Login}></Route>
              <Route path='/detail/:id' exact component={Detail}></Route>
            </div>
          </BrowserRouter>
        </Fragment>
      </Provider>
    )
  }
}

export default App;

3. 路由組件 BrowserRouter 和 HashRouter

BrowserRouter（history模式） 和 HashRouter（hash模式）作為路由配置的最外層容器，是兩種不同的模式，可根據需要選擇。

history 模式：

class App extends Component {
  render() {
    return (
      <BrowserRouter>
          <Header />
          <Route path='/' exact component={Home}></Route>
          <Route path='/login' exact component={Login}></Route>
          <Route path='/detail/:id' exact component={Detail}></Route>
      </BrowserRouter>
    )
  }
}

hash 模式：

class App extends Component {
  render() {
    return (
      <HashRouter>
          <Header />
          <Route path='/' exact component={Home}></Route>
          <Route path='/login' exact component={Login}></Route>
          <Route path='/detail/:id' exact component={Detail}></Route>
      </HashRouter>
    )
  }
}

4. 路徑匹配組件: Route 和 Switch

一、Route: 用來控制路徑對應顯示的組件

有以下幾個參數：

4.1 path：指定路由跳轉路徑

4.2 exact: 精確匹配路由

4.3 component：路由對應的組件

import About from './pages/about';

··· ···

<Route path='/about' exact component={About}></Route>

4.4 render： 通過寫render函數返回具體的dom：

<Route path='/about' exact render={() => (<div>about</div>)}></Route>

render 也可以直接返回 About 組件，像下面：

<Route path='/about' exact render={() => <About /> }></Route>

但是，這樣寫的好處是，不僅可以通過 render 方法傳遞 props 屬性，並且可以傳遞自定義屬性：

<Route path='/about' exact render={(props) => {
    return <About {...props} name={'cedric'} />
}}></Route>

然后，就可在 About 組件中獲取 props 和 name 屬性：

componentDidMount() {
    console.log(this.props) 
}


// this.props：
// history: {length: 9, action: "POP", location: {…}, createHref: ƒ, push: ƒ, …}
// location: {pathname: "/home", search: "", hash: "", state: undefined, key: "ad7bco"}
// match: {path: "/home", url: "/home", isExact: true, params: {…}}
// name: "cedric"

render 方法也可用來進行權限認證：

<Route path='/user' exact render={(props) => {
    // isLogin 從 redux 中拿到, 判斷用戶是否登錄
    return isLogin ? <User {...props} name={'cedric'} /> : <div>請先登錄</div>
}}></Route>

4.5 location: 將 與當前歷史記錄位置以外的位置相匹配，則此功能在路由過渡動效中非常有用

4.6 sensitive：是否區分路由大小寫

4.7 strict: 是否配置路由后面的 '/'

二、Switch

渲染與該地址匹配的第一個子節點 <Route> 或者 <Redirect>。

類似於選項卡，只是匹配到第一個路由后，就不再繼續匹配：

<Switch> 
    <Route path='/home'  component={Home}></Route>
    <Route path='/login'  component={Login}></Route> 
    <Route path='/detail'  component={detail}></Route> 
    <Redirect to="/home" from='/' /> 
</Switch>

// 類似於：
// switch(Route.path) {
//     case '/home':
//         return Home
//     case '/login':
//         return Login
//     ··· ···
// }

所以，如果像下面這樣:

<Switch> 
    <Route path='/home'  component={Home}></Route>
    <Route path='/login'  component={Login}></Route> 
    <Route path='/detail'  component={detail}></Route> 
    <Route path='/detail/:id'  component={detailId}></Route> 
    <Redirect to="/home" from='/' /> 
</Switch>
 

當路由為/detail/1時，只會訪問匹配組件detail, 所以需要在detail路由上加上exact:

<Switch> 
    <Route path='/home'  component={Home}></Route>
    <Route path='/login'  component={Login}></Route> 
    <Route path='/detail' exact  component={detail}></Route> 
    <Route path='/detail/:id'  component={detailId}></Route> 
    <Redirect to="/home" from='/' /> 
</Switch>
 

注意：如果路由 Route 外部包裹 Switch 時，路由匹配到對應的組件后，就不會繼續渲染其他組件了。但是如果外部不包裹 Switch 時，所有路由組件會先渲染一遍，然后選擇到匹配的路由進行顯示。

5. 導航組件: Link 和 NavLink

Link 和 NavLink 都可以用來指定路由跳轉，NavLink 的可選參數更多。

Link

兩種配置方式：

通過字符串執行跳轉路由

<Link to='/login'>
    <span>登錄</span>
</Link>

通過對象指定跳轉路由

• pathname: 表示要鏈接到的路徑的字符串。
• search: 表示查詢參數的字符串形式。
• hash: 放入網址的 hash，例如 #a-hash。
• state: 狀態持續到 location。通常用於隱式傳參（埋點），可以用來統計頁面來源

<Link to={{
        pathname: '/login',
        search: '?name=cedric',
        hash: '#someHash',
        state: { fromWechat: true }
    }}>
    <span>登錄</span>
</Link>

點擊鏈接 進入 Login 頁面后，就可以在this.props.location.state中看到 fromWechat: true:

NavLink

可以看做 一個特殊版本的 Link，當它與當前 URL 匹配時，為其渲染元素添加樣式屬性。

<Link to='/login' activeClassName="selected">
    <span>登錄</span>
</Link>

<NavLink
  to="/login"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
>
    <span>登錄</span>
</NavLink>

• exact: 如果為 true，則僅在位置完全匹配時才應用 active 的類/樣式。
• strict: 當為 true，要考慮位置是否匹配當前的URL時，pathname 尾部的斜線要考慮在內。
• location 接收一個location對象，當url滿足這個對象的條件才會跳轉
• isActive: 接收一個回調函數，只有當 active 狀態變化時才能觸發，如果返回false則跳轉失敗

const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}

<NavLink
  to="/login"
  isActive={oddEvent}
>login</NavLink>

6. Redirect

<Redirect> 將導航到一個新的地址。即重定向。

<Switch> 
    <Route path='/home' exact component={Home}></Route>
    <Route path='/login' exact component={Login}></Route> 
    <Redirect to="/home" from='/' exact /> 
</Switch>

上面，當訪問路由‘/’時，會直接重定向到‘/home’。

<Redirect> 常在用戶是否登錄：

class Center extends PureComponent {
    render() {
        const { loginStatus } = this.props;
        if (loginStatus) {
            return (
                <div>個人中心</div>
            )
        } else {
            return <Redirect to='/login' />
        }
    }
}

也可使用對象形式：

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

7. withRouter

withRouter 可以將一個非路由組件包裹為路由組件，使這個非路由組件也能訪問到當前路由的match, location, history對象。

import { withRouter } from 'react-router-dom';

class Detail extends Component {
    render() {
        ··· ···
    } 
}
 
const mapStateToProps = (state) => {
    return {
        ··· ···
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        ··· ···
    }
}
 
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Detail));

8. 編程式導航 - history 對象

例如，點擊img進入登錄頁：

class Home extends PureComponent {

    goHome = () => {
        console.log(this.props);
        
        this.props.history.push({
            pathname: '/login',
            state: {
                identityId: 1
            }
        })
    }

    render() {
        return (
            <img className='banner-img' alt='' src="img.png" onClick={this.goHome} />
        )
    } 
}

history 對象通常會具有以下屬性和方法：

length - (number 類型) history 堆棧的條目數
action - (string 類型) 當前的操作(PUSH, REPLACE, POP)
location - (object 類型) 當前的位置。location 會具有以下屬性：
pathname - (string 類型) URL 路徑
search - (string 類型) URL 中的查詢字符串
hash - (string 類型) URL 的哈希片段
state - (object 類型) 提供給例如使用 push(path, state) 操作將 location 放入堆棧時的特定 location 狀態。只在瀏覽器和內存歷史中可用。
push(path, [state]) - (function 類型) 在 history 堆棧添加一個新條目
replace(path, [state]) - (function 類型) 替換在 history 堆棧中的當前條目
go(n) - (function 類型) 將 history 堆棧中的指針調整 n
goBack() - (function 類型) 等同於 go(-1)
goForward() - (function 類型) 等同於 go(1)
block(prompt) - (function 類型) 阻止跳轉。 

注意，只有通過 Route 組件渲染的組件，才能在 this.props 上找到 history 對象

所以，如果想在路由組件的子組件中使用 history ，需要使用 withRouter 包裹:

import React, { PureComponent } from 'react';
import { withRouter } from 'react-router-dom';

class 子組件 extends PureComponent {

    goHome = () => {
        this.props.history.push('/home')
    }


    render() {
        console.log(this.props)
        return (
            <div onClick={this.goHome}>子組件</div>
        )
    }
}

export default withRouter(子組件);

9. 路由過渡動畫

import { TransitionGroup, CSSTransition } from "react-transition-group";

class App extends Component {

  render() {
    return (
      <Provider store={store}>
        <Fragment> 
          <BrowserRouter>
            <div>
              <Header />
              
              {/* 最外部的<Route></Route>不進行任何路由匹配，僅僅是用來傳遞 location */}
              
              <Route render={({location}) => {
                console.log(location);
                return (
                  <TransitionGroup>
                    <CSSTransition
                      key={location.key}
                      classNames='fade'
                      timeout={300}
                    >
                      <Switch>
                        <Redirect exact from='/' to='/home' />
                        <Route path='/home' exact component={Home}></Route>
                        <Route path='/login' exact component={Login}></Route>
                        <Route path='/write' exact component={Write}></Route>
                        <Route path='/detail/:id' exact component={Detail}></Route>
                        <Route render={() => <div>Not Found</div>} />
                      </Switch>
                    </CSSTransition>
                  </TransitionGroup>
                )
              }}>
              </Route>
            </div>
          </BrowserRouter>
        </Fragment>
      </Provider>
    )
  }
}

.fade-enter {
  opacity: 0;
  z-index: 1;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

10. 打包部署的路由配置

項目執行npm run build后，將打包后的build文件當大 Nginx 配置中。

如果 react-router 路由 使用了 history 模式（即<BrowserRouter>），那么在 Nginx 配置中必須加上:

location / {
        ··· ···
        try_files $uri /index.html;
        ··· ···
        }
    }

如果 react-router 路由 使用了 hash 模式(即<HashRouter>)，那么在 Nginx 中不需要上面的配置。