React-router4官方文檔學習筆記-WEB篇

時間 2019-12-08

標籤 react router4 router 官方文檔學習筆記 web 欄目 React 简体版

原文原文鏈接

React-router4官方文檔學習筆記-WEB篇

react-router官方文檔-WEB篇連接html

React-router4官方文檔學習筆記-WEB篇

BrowserRouter

使用了HTML5的history API， (pushState, replaceState和popState等方法)來保證視圖與URL的同步。node

basename: string

全部位置的基本URL。若是您的應用程序是從服務器上的子目錄提供的，則須要將其設置爲子目錄。正確格式化的基本名稱應該有一個主要的斜槓，但沒有尾部斜槓。react

eg:git

<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="/calendar/today">

getUserConfirmation: func

默認使用window.confirm方法github

eg:web

// this is the default behavior
const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message)
  callback(allowTransition)
}

<BrowserRouter getUserConfirmation={getConfirmation}/>

forceRefresh： bool

強制刷新瀏覽器，在不支持HTML5 history API的瀏覽器中使用npm

eg:api

const supportsHistory = 'pushState' in window.history
<BrowserRouter forceRefresh={!supportsHistory}/>

keylength: number

location.key的長度，默認值爲6數組

children: node

A single child element to render.瀏覽器

HashRouter

不支持location.key與location.state

建議使用BrowserRouter

Link

爲你的應用提供聲明性可訪問的導航

to: string

指向的路徑

to: object

指向的location

replace: bool

爲true時，新的路徑或者location會替換當前的路徑而不是在歷史記錄中建立一條新的。

NavLink

一個特殊的Link組件，它能夠爲其所屬組件添加class或者style樣式等屬性。

activeClassName: string

當該路由成功匹配時，添加class到該路由對應的即將渲染的組件，默認值爲active。

eg:

<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>

activeStyle

組件被渲染時，爲其添加樣式

eg:

<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
>FAQs</NavLink>

exact: bool

同Route的exact屬性

strict: bool

同Route的strict屬性

isActive: func

爲匹配一個路由除了路徑匹配之外，添加更多的判斷條件,返回值爲bool類型

eg:

// only consider an event active if its event id is an odd number
const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}

<NavLink
  to="/events/123"
  isActive={oddEvent}
>Event 123</NavLink>

location: object

默認值是當前history的location，傳入其餘location能夠替代isActive函數中的location對象

MemoryRouter

在非瀏覽器環境，模仿瀏覽器history對象所作的那樣記錄url的變化。例如React Native。

Redirect

渲染Redirect組件會重定向到一個新的location而且覆蓋當前的location的歷史記錄。

to: string

重定向的路徑

to: object

重定向目標的location對象

push: bool

爲true時，不會覆蓋當前的location的歷史記錄，而是建立一條新的記錄。

from: string

重定向以前的路徑

僅當Redirect組件在Switch組件中渲染時可使用。

Route

React-router最基礎也最重要的組件，它規定了當匹配到指定路由時渲染哪些組件。

eg:

import { BrowserRouter as Router, Route } from 'react-router-dom';

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>
<div>
  <Home/>
  <!-- react-empty: 2 -->
</div>
<div>
  <!-- react-empty: 1 -->
  <NewsFeed/>
</div>

Route render methods--Route渲染指定組件的方法

Route渲染組件的方法有三種, 須要注意的是每一個Route組件只能使用其中一種渲染方法。

<Route component>
<Route render>
<Route children>

Route props -- Route的render方法默認包含的參數

以上的每一個渲染方法都傳入了三個包含路由信息的參數。

match
location
history

component

當location與路由匹配時，是用於渲染組件的方法之一，此時react-router會調用React.createElement方法爲給定的組件建立一個新的React節點。

注意：若是使用內聯函數的形式賦值給component屬性，意味着每次render你都會獲得一個全新的組件，觸發組件unmounting方法和組件的mounting狀態。

經常使用寫法：函數組件與類組件

eg1: Function Component 直接在props中獲取路由信息

<Route path="/user/:username" component={User}/>

const User = ({ match }) => {
  return <h1>Hello {match.params.username}!</h1>
}

eg2: Class Component使用withRouter方法能夠在組件中注入match, location，history對象，而後經過this.props獲取。

//App.js
import User from './User.js';
import React from 'react';
import {
  BrowserRouter as Router
} from 'react-router';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return (
      <div>
        <Route path="/user/:username" component={User}/>
      </div>
    )
  }
}

ReactDOM.render(
  <Router>
    <App />
  </Router>, document.getElementById('root')
);

//User.js
import { withRouter } from 'react-router';
import React from 'react';
class User extends React.Component {
  render() {
    return (
      <h1>
        Hello {this.props.match.params.username}!
      </h1>
    );
  }
}

export default withRouter(User);

render: func

不一樣於component屬性，每次render時，會更新已存在的組件而不是建立一個新的組件。

eg:

// convenient inline rendering
<Route path="/home" render={() => <div>Home</div>}/>

// wrapping/composing
const FadingRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    <FadeIn>
      <Component {...props}/>
    </FadeIn>
  )}/>
)

<FadingRoute path="/cool" component={Something}/>

children: func

傳入的參數與render相同，可是其中match對象在未路由匹配時值爲null。能夠靈活使用這一點。

eg1:

<ul>
  <ListItemLink to="/somewhere"/>
  <ListItemLink to="/somewhere-else"/>
</ul>

const ListItemLink = ({ to, ...rest }) => (
  <Route path={to} children={({ match }) => (
    <li className={match ? 'active' : ''}>
      <Link to={to} {...rest}/>
    </li>
  )}/>
)

eg2:

<Route children={({ match, ...rest }) => (
  {/* Animate will always render, so you can use lifecycles
      to animate its child in and out */}
  <Animate>
    {match && <Something {...rest}/>}
  </Animate>
)}/>

path: string

當Route組件不填寫path屬性時，默認匹配並渲染對應組件。

Any valid URL path that path-to-regexp understands.

exact: bool

爲true表示只有當path準確匹配location.path，纔會渲染組件。

path	location.path	exact	matches?
/one	/one/two	true	no
/one	/one/two	false	yes

strict: bool

當爲true時，具備尾部斜槓的路徑將僅與具備尾部斜槓的location.pathname匹配。當location.pathname中有其餘URL段時，這不起做用。

strict爲true時

path	location.path	matches?
/one/	/one	no
/one/	/one/	yes
/one/	/one/two	yes

與exact搭配使用,兩個都爲true時

path	location.path	matches?
/one/	/one	no
/one/	/one/	yes
/one/	/one/two	no

location

一般一個Route組件的path會與當前的路由進行匹配，然而Route還有支持傳入包含其餘路由信息的location對象以便執行某些操做。

eg: animated-transitions的示例中，在Route組件中傳入了location對象用於執行離開動畫。

Router

做爲app最底層的路由組件

主要有如下五種使用場景

<BrowserRouter>
<HashRouter>
<MemoryRouter>
<NativeRouter>
<StaticRouter>

eg:

import { Router } from 'react-router'
import createBrowserHistory from 'history/createBrowserHistory'

const history = createBrowserHistory()

<Router history={history}>
  <App/>
</Router>

若是引用的是react-router-dom，則使用以下的引用方式, 效果和上方的代碼相同。

import {
  BrowserRouter as Router,
} from 'react-router-dom';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <Router>
    <App />
  </Router>, document.getElementById('root')
);

StaticRouter

適用於服務端渲染

Switch

內部僅渲染一個與當前路由匹配的視圖。

舉個例子當前匹配路徑爲/about時，比較不使用Switch與使用Switch的不一樣

eg: 不用Switch的狀況

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

//結果：About,User,NoMatch組件都渲染到視圖中。

eg: 使用Switch的狀況

import { Switch, Route } from 'react-router'

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

//結果：僅渲染了About組件

緣由： Switch內部順序匹配當前路由，當匹配到/about時，Switch會中止匹配，並渲染已匹配到的路由對應的組件。

應用場景

Scroll to top

class ScrollToTop extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0)
    }
  }

  render() {
    return this.props.children
  }
}

export default withRouter(ScrollToTop)