react的路由鉤子函數(shù)主要有四種:
??useHistory
??useLocation
??useParams
??useRouteMatch
但是使用這些鉤子函數(shù)React版本必須>= 16.8
useHistory
這個(gè)鉤子可以訪問history赏枚，可以更好的進(jìn)行導(dǎo)航
首先聲明此鉤子函數(shù)
import React, {Component} from 'react';
import {useHistory} from "react-router-dom";
//引入useHistory
function ReactUseHistory() {
let history = useHistory();
function handleClick() {
history.push("/");
}
return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
}
export default ReactUseHistory;
使用
import React, {Component} from 'react';
import ReactUseHistory from "../reactRouter/ReactUseHistory";
class Personal extends Component {
render() {
return (
<div>
<h4>個(gè)人中心頁(yè)</h4>
<ReactUseHistory />
</div>
);
}
}
export default Personal;
QQ20200812-152621.png
點(diǎn)擊Go home按鈕巧涧，即可跳轉(zhuǎn)到首頁(yè)。
useLocation
此鉤子可以返回location表示當(dāng)前URL對(duì)象
定義
import React from "react";
import ReactDOM from "react-dom";
import {
BrowserRouter as Router,
Switch,
useLocation
} from "react-router-dom";
//引入useLocation
function usePageViews() {
let location = useLocation();
// 在此可以做一些統(tǒng)計(jì)
// React.useEffect(() => {
// ga.send(["pageview", location.pathname]);
// }, [location]);
console.log('useLocation',location)
}
export default usePageViews
使用
import React from "react";
import ReactDOM from "react-dom";
import {
BrowserRouter as Router,
Switch,
Route,
useParams,
useRouteMatch
} from "react-router-dom";
import usePageViews from'./ReactUseLocation'
function BlogPost() {
let {id} = useParams();
//useLocation 引入定義useLocation直接使用即可
usePageViews()
return (
<div>
<h4>新聞詳情頁(yè)</h4>
<p>params:{id}</p>
</div>)
}
export default BlogPost;
QQ20200812-153723.png
QQ20200812-153750.png
當(dāng)點(diǎn)擊左側(cè)的導(dǎo)航時(shí)岔帽，可以直接獲取location表示的URL對(duì)象
useParams
useParams返回URL參數(shù)的鍵值對(duì)的對(duì)象
定義此鉤子
import React from "react";
import ReactDOM from "react-dom";
import {
BrowserRouter as Router,
Switch,
Route,
useParams,
useRouteMatch
} from "react-router-dom";
//引入useParams
function BlogPost() {
let {id} = useParams();
return (
<div>
<h4>新聞詳情頁(yè)</h4>
<p>params:{id}</p>
</div>)
}
export default BlogPost;
使用
<Switch>
<Route exact path={'/news'} component={NewsDetail}>
</Route>
<Route path="/news/list/:id">
<BlogPost />
{/* 將此函數(shù)式組件導(dǎo)入直接使用即可 */}
</Route>
</Switch>
QQ20200812-154821.png
每次訪問不同的路由荷荤，可以取出其中的params
useRouterMatch
此鉤子可以精準(zhǔn)匹配路由然后顯示對(duì)應(yīng)的頁(yè)面
定義
import React from "react";
import ReactDOM from "react-dom";
import {
BrowserRouter as Router,
Switch,
Route,
useParams,
useRouteMatch
} from "react-router-dom";
import usePageViews from'./ReactUseLocation'
function BlogPost() {
let {id} = useParams();
//useLocation
usePageViews()
//useRouteMatch精準(zhǔn)匹配params
//如果匹配不成功退渗，則match為null，匹配成功返回路由對(duì)象
let match = useRouteMatch("/news/list/:id=3");
if (match){
return (
<div>
<p>精準(zhǔn)匹配 新聞{id}</p>
</div>
)
}
return (
<div>
<h4>新聞詳情頁(yè)</h4>
<p>params:{id}</p>
</div>)
}
export default BlogPost;
使用
<Switch>
<Route exact path={'/news'} component={NewsDetail}>
</Route>
<Route path="/news/list/:id">
<BlogPost />
{/* 將此函數(shù)式組件導(dǎo)入直接使用即可 */}
</Route>
</Switch>
效果
QQ20200812-155259.png
只有當(dāng)路由精準(zhǔn)匹配時(shí)蕴纳，才會(huì)顯示對(duì)應(yīng)的組件
