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