首先從react-router的npm包開始看起,分別有react-router和react-router-dom,二者的區別在於後者具備一些dom api,好比Link、BrowserRouter、HashRouter。不難發現react-router-dom具備一些在瀏覽器上所須要的api,而react-router只有核心api,因此咱們總結下javascript
其中react-router-dom和react-router-native都繼承自react-router,因此咱們在瀏覽器上開發只須要引入react-router-dom便可
vue
我最早接觸的框架是vue,vue中的路由配置使用的是配置文件,而react使用的是jsx來配置路由,因此初次學習會有點彆扭。java
其實就是路由的hash和history兩種模式(要是不瞭解這兩種模式之間的區別那就須要去惡補下啦)
而且這兩個組件是路由的容器,必須在最外層react
// hash模式
ReactDom.render(
<HashRouter>
<Route path="/" component={Home}/>
</HashRouter>
)
// history模式
ReactDom.render(
<BrowserRouter>
<Route path="/" component={Home}/>
</BrowserRouter>
)
複製代碼
下面說說HashRouter和BrowserRouter上的參數web
Prompt是用來提示用戶是否要跳轉,給用戶提示信息默認使用window.confirm,能夠結合getUserConfirmation構建自定義提示信息vue-router
<Prompt message={location => {
return '請確認'
}}/>
若是直接返回true,則不會彈窗
複製代碼
Route是路由的一個原材料,它是控制路徑對應顯示的組件npm
Route的參數編程
path | url | 是否開啓 | 匹配結果 |
---|---|---|---|
/a | /a/b | false | yes |
/a | /a/b | true | no |
path | url | 是否開啓 | 匹配結果 |
---|---|---|---|
/a | /a | true | yes |
/a | /A | true | yes |
path | url | 是否開啓 | 匹配結果 |
---|---|---|---|
/a | /a/ | true | yes |
/a | /a/c | true | yes |
/a | /a | true | no |
低級路由,適用於任何路由組件,主要和redux深度集成,使用必須配合history對象
使用Router路由的目的是和狀態管理庫如redux中的history同步對接redux
<Router history={history}>
...
</Router>
複製代碼
二者都是跳轉路由,NavLink的參數更多些api
<Link to="/a"/>
複製代碼
<Link to={{
pathname: '/courses',
search: '?sort=name',
hash: '#the-hash',
state: { fromDashboard: true }
}}/>
複製代碼
const oddEvent = (match, location) => {
console.log(match,location)
if (!match) {
return false
}
console.log(match.id)
return true
}
<NavLink isActive={oddEvent} to="/a/123">組件一</NavLink>
複製代碼
<NavLink to="/a/123" location={{ key:"mb5wu3", pathname:"/a/123" }}/>
複製代碼
Redirect重定向很簡單,咱們直接看代碼便可
// 基本的重定向
<Redirect to="/somewhere/else" />
// 對象形式
<Redirect
to={{
pathname: "/login",
search: "?utm=your+face",
state: { referrer: currentLocation }
}}
/>
// 採用push生成新的記錄
<Redirect push to="/somewhere/else" />
// 配合Switch組件使用,form表示重定向以前的路徑,若是匹配則重定向,不匹配則不重定向
<Switch>
<Redirect from='/old-path' to='/new-path'/> <Route path='/new-path' component={Place}/> </Switch> 複製代碼
路由切換,只會匹配第一個路由,能夠想象成tab欄
Switch內部只能包含Route、Redirect、Router
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>
</Switch>
複製代碼
當一個非路由組件也想訪問到當前路由的match,location,history對象,那麼withRouter將是一個很是好的選擇,能夠理解爲將一個組件包裹成路由組件
import { withRouter } from 'react-router-dom'
const MyComponent = (props) => {
const { match, location, history } = this.props
return (
<div>{props.location.pathname}</div>
)
}
const FirstTest = withRouter(MyComponent);
複製代碼
用過vue的都知道,vue-router有組件形式的導航,也有編程式導航,那react-router怎麼使用api來控制前進後退和刷新呢?這就須要咱們來講明下history對象的做用了
其實在每一個路由組件中咱們可使用this.props.history獲取到history對象,也可使用withRouter包裹組件獲取,
在history中封裝了push,replace,go等方法,具體內容以下
History {
length: number;
action: Action;
location: Location;
push(path: Path, state?: LocationState): void; // 調用push前進到一個地址,能夠接受一個state對象,就是自定義的路由數據
push(location: LocationDescriptorObject): void; // 接受一個location的描述對象
replace(path: Path, state?: LocationState): void; // 用頁面替換當前的路徑,不可再goBack
replace(location: LocationDescriptorObject): void; // 同上
go(n: number): void; // 往前走多少也頁面
goBack(): void; // 返回一個頁面
goForward(): void; // 前進一個頁面
block(prompt?: boolean | string | TransitionPromptHook): UnregisterCallback;
listen(listener: LocationListener): UnregisterCallback;
createHref(location: LocationDescriptorObject): Href;
}
複製代碼
這樣咱們想使用api來操做前進後退就能夠調用history中的方法啦