react-routerv4.0學習總結
1.引用:react-router還是react-router-dom?
這兩個包這要引用一個就可以了,不同之處在於後者比前者多了類似於<Link>、<BrowerRouter>這樣的DOM元件。
大多數情況下,我們將會引用react-router-dom。如果搭配redux,還需要引用react-router-redux。
2.<Route>元件:當頁面的url地址和<Route>元件的path屬性匹配時就渲染出對應的ui介面。
(1).Route元件自帶三個render method和三個props:
render methods:
每種render method都有特殊的應用場景,一個Route元件應該只使用一種render方法,大多數情況下我們會使用component.
a. render: func
用於內聯渲染,不會產生重複裝載問題。
<Route path="/home" render={() => <h1>Home</h1} /> // 包裝 組合 const FadingRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props => ( <FadeIn> <Component {...props} /> </FaseIn> )} /> ) <FadingRoute path="/cool" component={Something} />
b. component:
只有當訪問的地址和path屬性匹配時,這個react component才會被渲染,
此時元件接受route props(match,props,location).當使用component時,router將使用React.createElement建立
一個新的react元素。若使用行內函數傳值給component,將產生不必要的重複裝載,對於行內函數,請使用render進行渲染
<Route path="/user/:username" component={User} /> const User = ({ match }) => { return <h1>Hello {match.params.username}!</h1> }
c. children: func
有時候你可能只想知道訪問地址是否被匹配,然後改變下別的東西,而不僅僅是對應的頁面。
<ul>
<ListItemLink to="/somewhere" />
<ListItemLink to="/somewhere-ele" />
</ul>
const ListItemLink = ({ to, ...rest }) => (
<Route path={to} children={({ match }) => (
<li className={match ? 'active' : ''}>
<Link to={to} {...rest} />
</li>
)}
)
props:
a. math:
b. location:
c. history:
所有的渲染方法都將傳入這三個props。
(2).其他props:
path: 有效的url路徑
exact: (是否嚴格匹配)只有path與location.pathname完全匹配時才會渲染
path location.pathname exact matches?
/one /one/two true no
/one /one/two false yes
strict: (對路徑末尾斜槓的匹配)
path location.pathname matches?
/one/ /one no
/one/ /one/ yes
/one/ /one/two yes
如果要確保路由沒有末尾斜槓,那麼 strict 和exact 都必須同時為 true!!!
3.<switch>元件:只渲染出第一個與當前訪問地址匹配的 <Route>
或 <Redirect>
。
<Switch>
下的子節點只能是 <Route>
或 <Redirect>
元素。只有與當前訪問地址匹配的第一個子節點才會被渲染。<Route>
元素用它們的 path
屬性匹配,<Redirect>
元素使用它們的 from
屬性匹配。如果沒有對應的 path
或 from
,那麼它們將匹配任何當前訪問地址。4.<Redirect>元件:渲染時將導航到一個新地址,這個新地址覆蓋在訪問歷史資訊裡面的本該訪問的那個地址。to (string or object) : 重定向的url字串或location物件from (string) : 將要被重定向的url地址
push (boolean) : 若為真,則重定向操作將會把要訪問的地址新增到歷史記錄裡,並且無法回到前一個頁面。
5.<Prompt> : 當用戶離開當前頁面時做出一些提示。
when (bool) : 通過設定一定條件決定是否啟用Prompt。
message (string or func) : 當用戶離開頁面時,設定的提示資訊或回撥函式(回撥函式接受location物件作為引數)。
6.物件和方法:
history :
length: 歷史堆疊中的條目數量
action: 當前動作(push , pop, replace)
location: 當前位置
- pathname: url路徑
- search: url查詢串
- hash: url中的hash片段
- state: 特定於位置的狀態
push(path [, state]): 將新條目推入歷史堆疊
replace(path [, state]): 替換歷史堆疊上的當前條目
goBack(): go(-1)
go(n): 將history中的指標向前移動n
goForward: go(1)
block(prompt): 阻止導航
location :
history 物件是可變的,因為建議從 <Route>
的 prop 裡來獲取 location,而不是從 history.location 直接獲取。
這樣可以保證 React 在生命週期中的鉤子函式正常執行,例如以下程式碼:
class Comp extends React.Component {
componentWillReceiveProps(nextProps) {
// locationChanged
const locationChanged = nextProps.location !== this.props.location
// 錯誤方式,locationChanged 永遠為 false,因為history 是可變的
const locationChanged = nextProps.history.location !== this.props.history.location
}
}
location 物件不會發生改變,因此可以在生命週期的回撥函式中使用 location 物件來檢視當前頁面的訪問地址是否
發生改變。這種技巧在獲取遠端資料以及使用動畫時非常有用。
componentWillReceiveProps(nextProps) {
if (nextProps.location !== this.props.location) {
// 已經跳轉了!
}
}
在以下情境中可以獲取 location 物件:
- 在
Route component
中,以 this.props.location 獲取 - 在
Route render
中,以 ({location}) => () 方式獲取 - 在
Route children
中,以 ({location}) => () 方式獲取 - 在
withRouter
中,以 this.props.location 的方式獲取
match : 包含了Route物件如何與url匹配的資訊。
params( object ): 通過解析url中動態部分獲得的鍵值對。
isExact( boolean ): 為true時,整個url都需要匹配。
path( string ): 用來匹配url的模式。
url( string ): url匹配的部分。
在以下情境中可以獲取 match 物件
- 在
Route component
中,以 this.props.match獲取 - 在
Route render
中,以 ({match}) => () 方式獲取 - 在
Route children
中,以 ({match}) => () 方式獲取 - 在
withRouter
中,以 this.props.match的方式獲取 - matchPath 的返回值
當一個 Route 沒有 path 時,它會匹配一切路徑。