react-router-dom中⽂⽂档
HOOKS
React Router附带了⼀些HOOK，可让您访问路由器的状态并从组件内部执⾏导航
useHistory
useLocation
useParams
useRouteMatch
useHistory
useHistory 钩⼦返回 history 对象，可以使⽤ useHistory 进⾏导航
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
function handleClick() {
history.push("/home");
}
return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
}
useLocation
useLocation 钩⼦返回当前URL的 location 对象。可以把它想象成⼀个useState，每当URL发⽣变化时，它都会返回⼀个新的位置。这是⾮常有⽤的，例如，当⼀个新的页⾯加载时，⽐如使⽤web分析⼯具触发⼀个新的“页⾯视图”事件，如下⾯的例⼦所⽰:
import React from "react";
import ReactDOM from "react-dom";
import {
BrowserRouter as Router,
Switch,
useLocation
} from "react-router-dom";
function usePageViews() {
let location = useLocation();
React.useEffect(() => {
ga.send(["pageview", location.pathname]);
}, [location]);
}
function App() {
usePageViews();
return <Switch>...</Switch>;
}
<Router>
<App />
</Router>,
node
);
useParams
useParams 动态参数列表的引⽤对象，⽤于获取<Route>中的 match.params (动态参数)
import React from "react";
import ReactDOM from "react-dom";
import {
BrowserRouter as Router,
Switch,
Route,
useParams
} from "react-router-dom";
function BlogPost() {
let { slug } = useParams();
return <div>Now showing post {slug}</div>;
}
<Router>
<Switch>
<Route exact path="/">
<HomePage />
</Route>
<Route path="/blog/:slug">
<BlogPost />
</Route>
</Switch>
</Router>,
node
);
useRouteMatch
useRouteMatch 尝试以与<Route>相同的⽅式匹配当前URL。它主要⽤于访问匹配数据，⽽⽆需实际渲染<Route>
Now, instead of
import { Route } from "react-router-dom";
function BlogPost() {
return (
<Route
path="/blog/:slug"
render={({ match }) => {
// Do whatever you want with
return <div />;
}}
/>
);
}
you can just
import { useRouteMatch } from "react-router-dom";
function BlogPost() {
let match = useRouteMatch("/blog/:slug");
// Do whatever you want with
return <div />;
}
useRouteMatch 钩⼦也可以:
不接受任何参数并返回当前<Route>
接受单个参数，与matchPath的props参数相同。它可以是⼀个字符串形式的路径名()，也可以是⼀个带有匹配道具的对象，像这样:
const match = useRouteMatch({
path: "/BLOG/:slug/",
strict: true,
sensitive: true
});
<BrowserRouter>
Router使⽤HTML5 History API（(pushState, replaceState and the popstate event）来保证 UI 组件和 URL 同步
<BrowserRouter
basename={optionalString}
forceRefresh={optionalBool}
getUserConfirmation={optionalFunc}
keyLength={optionalNumber}
>
<App />
</BrowserRouter>
basename <string>
基准URL，如果你的应⽤程序是从服务器上的⼦⽬录中提供的，你需要将其设置为⼦⽬录。⼀个正确格式化的basename应该有⼀个开头斜杠，但没有结尾斜杠。
<BrowserRouter basename="/calendar">fontweight属性bold
<Link to="/today"/> // renders <a href="/calendar/today">
<Link to="/tomorrow"/> // renders <a href="/calendar/tomorrow">
...
</BrowserRouter>
getUserConfirmation <function>
⽤于确认路由跳转的函数。默认使⽤
<BrowserRouter
getUserConfirmation={(message, callback) => {
// this is the default behavior
const allowTransition = firm(message);
callback(allowTransition);
}}
/>
forceRefresh <boolean>
如果值为 true 路由跳转将会刷新整个页⾯。可以使⽤它来模拟传统服务器渲染应⽤程序，路由跳转之间刷新页⾯的⼯作⽅式
<BrowserRouter forceRefresh={true} />
keyLength <number>
location.key的长度。默认为6。
<BrowserRouter keyLength={12} />
children <element>
要渲染的⼦元素。
Note: 如果React < 16，必须使⽤，因为render⽅法不能返回多个元素。如果您需要多个元素，则可以尝试将它们包装在extra中<div> <HashRouter>
<Router>使⽤ Hash 模式路由(i.e. window.location.hash)来保证 UI 组件和 URL 同步
重要说明:Hash模式不⽀持location.key或location.state。在以前的版本中，我们尝试对⾏为进⾏兼容处理，但存在⽆法解决的极端情况。任何需要此⾏为的代码或插件都将⽆法⼯作。由于此技术仅旨在⽀持旧版浏览器，因此我们建议您配置服务器以供使⽤<BrowserHistory>。
<HashRouter
basename={optionalString}
getUserConfirmation={optionalFunc}
hashType={optionalString}
>
<App />
</HashRouter>
basename <string>
基准URL，如果你的应⽤程序是从服务器上的⼦⽬录中提供的，你需要将其设置为⼦⽬录。⼀个正确格式化的basename应该有⼀个开头斜杠，但没有结尾斜杠。
<HashRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="#/calendar/today">
getUserConfirmation <function>
⽤于确认路由跳转的函数。默认使⽤
<HashRouter
getUserConfirmation={(message, callback) => {
// this is the default behavior
const allowTransition = firm(message);
callback(allowTransition);
}}
/>
hashType <string>
window.location.hash 的编码类型。可⽤值:
"slash" - 类似 #/ 或 #/sunshine/lollipops
"noslash" - 类似 # 或 #sunshine/lollipops
"hashbang" - 创建 Hash (Google弃⽤) 类似 #!/ 或 #!/sunshine/lollipops
默认为"slash"。
children <element>
渲染
<Link>
提供声明式、可访问的导航。
<Link to="/about">About</Link>
to <string>
链接路径的字符串形式，由路由路径、搜索参数和 Hash 属性构成
<Link to="/courses?sort=name" />
to <object>
具有以下属性:
pathname: <string> 表⽰要链接到的路径
search: <string> 查询参数
hash: ⼀个放在URL中的Hash，例如 #a-hash.
state: location.state 参数.
to <function>
将当前路由信息作为参数传递，该函数返回string或者object
<Link to={location => ({ ...location, pathname: "/courses" })} />
<Link to={location => `${location.pathname}?sort=name`} />
replace <boolean>
如果为 true，单击链接时将替换当前历史条⽬，⽽不是添加新条⽬
<Link to="/courses" replace />
innerRef <RefObject>
从React Router 5.1开始，如果您使⽤的是React 16，则不需要此功能，因为我们会将到底层<a>.使⽤普通的ref代替使⽤获取组件的底层引⽤。
component <React.Component>
如果需要使⽤⾃定义的导航组件，可以通过 component 指定
const FancyLink = React.forwardRef((props, ref) => (
<a ref={ref} {...props}>  {props.children}</a>
))
<Link to="/" component={FancyLink} />

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。