React-router5.x使用總結

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

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

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

1、安裝：

cnpm i react-router react-router-dom -S

2、使用：

import React, { Component } from 'react'
import { BrowserRouter, Route, Link } from 'react-router-dom'
import ThisCollapse from '@/components/ThisCollapse'
import ThisProgress from '@/components/ThisProgress'
import ThisTable from '@/components/ThisTable'

export default class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <Route path="/" exact  component={ThisTable}></Route>
                    <Route path="/a" exact  component={ThisCollapse} ></Route>
                    <Route path="/b" exact  component={ThisProgress} ></Route>
                </div>
            </BrowserRouter>
        )
    }
}

3、路由組件 BrowserRouter 和 HashRouter：

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

hash 模式：

import React, { Component } from 'react'
import { HashRouter, Route, Link } from 'react-router-dom'
import ThisCollapse from '@/components/ThisCollapse'
import ThisProgress from '@/components/ThisProgress'
import ThisTable from '@/components/ThisTable'

export default class App extends Component {
    render() {
        return (
            <HashRouter>
                <div>
                    <Route path="/" exact  component={ThisTable}></Route>
                    <Route path="/a" exact  component={ThisCollapse} ></Route>
                    <Route path="/b" exact  component={ThisProgress} ></Route>
                </div>
            </HashRouter>
        )
    }
}

通過“http://localhost:8080/#/a” 即可直接訪問組件ThisCollapse。

history 模式：

import React, { Component } from 'react'
import { BrowserRouter, Route, Link } from 'react-router-dom'
import ThisCollapse from '@/components/ThisCollapse'
import ThisProgress from '@/components/ThisProgress'
import ThisTable from '@/components/ThisTable'

export default class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <Route path="/" exact  component={ThisTable}></Route>
                    <Route path="/a" exact  component={ThisCollapse} ></Route>
                    <Route path="/b" exact  component={ThisProgress} ></Route>
                </div>
            </BrowserRouter>
        )
    }
}

注意：當我們去訪問localhost:8081/a這個地址的時候，webpack-dev-server會默認爲你要訪問服務器上的一個a頁面。但我們的項目中只有一個index.html頁面，並不存在list頁面。所以它會提示你：Cannot GET /a（頁面不存在）

在package.json中，我們可以使用webpack-dev-server中的 historyApiFallback 配置來解決此問題：

    devServer: {
        historyApiFallback: true
    }

這樣通過：“http://localhost:8080/a”可以直接訪問組件ThisCollapse。

4、路徑匹配組件: Route 和 Switch：

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

有以下幾個參數：

4.1 path：指定路由跳轉路徑

4.2 exact: 精確匹配路由

4.3 component：路由對應的組件

import ThisCollapse from '@/components/ThisCollapse'

...

<Route path="/" exact component={ThisTable}></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>。

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

            <BrowserRouter>
                <Switch>
                        <Route path="/" exact component={ThisTable}></Route>
                        <Route path="/a" exact component={ThisCollapse} ></Route>
                        <Route path="/a" exact component={ThisProgress} ></Route>
                </Switch>
            </BrowserRouter>

此時，“http://localhost:8082/a”只能匹配到組件ThisCollapse。

所以，如果像下面這樣:

<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 中不需要上面的配置。

React-router5.x使用總結

1、安裝：

2、使用：

3、路由組件 BrowserRouter 和 HashRouter：

4、路徑匹配組件: Route 和 Switch：

5. 導航組件: Link 和 NavLink

6. Redirect

7. withRouter

8. 編程式導航 - history 對象

9. 路由過渡動畫

10. 打包部署的路由配置

Django中整合Vue-cli，並解決各種路徑引用錯誤和跨域的問題

解決vue-cli構建後的index.html找不到圖標和引用的js、css文件路徑錯誤的問題

Python3可變數據類型共有的方法

element-ui的modal中表單驗證

Python3中各數據類型共有的方法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結