react-router-dom中⽂⽂档
HOOKS
React Router附带了⼀些HOOK，可让您访问路由器的状态并从组件内部执⾏导航
uHistory
priestessuLocation
uParams
uRouteMatch
uHistory
uHistory 钩⼦返回 history 对象，可以使⽤ uHistory 进⾏导航
import { uHistory } from "react-router-dom";
function HomeButton() {
let history = uHistory();
function handleClick() {
history.push("/home");
}
return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
}
uLocation
uLocation 钩⼦返回当前URL的 location 对象。可以把它想象成⼀个uState，每当URL发⽣变化时，它都会返回⼀个新的位置。这是⾮常有⽤的，例如，当⼀个新的页⾯加载时，⽐如使⽤web分析⼯具触发⼀个新的“页⾯视图”事件，如下⾯的例⼦所⽰:
import React from "react";
import ReactDOM from "react-dom";
import {
BrowrRouter as Router,
Switch,
uLocation
} from "react-router-dom";
function uPageViews() {
let location = uLocation();
React.uEffect(() => {
ga.nd(["pageview", location.pathname]);
}, [location]);
}
function App() {
uPageViews();孟母三迁翻译>种子圣殿
return <Switch>...</Switch>;
}
<Router>
<App />
</Router>,
node
);
uParams
uParams 动态参数列表的引⽤对象，⽤于获取<Route>中的 match.params (动态参数)
import React from "react";
import ReactDOM from "react-dom";
import {
BrowrRouter as Router,
Switch,
Route,
uParams
} from "react-router-dom";
function BlogPost() {
let { slug } = uParams();
return <div>Now showing post {slug}</div>;
}
<Router>
<Switch>
<Route exact path="/">
<HomePage />
</Route>
<Route path="/blog/:slug">
<BlogPost />
</Route>
</Switch>
</Router>,
node
);
uRouteMatch
uRouteMatch 尝试以与<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 { uRouteMatch } from "react-router-dom";
function BlogPost() {
let match = uRouteMatch("/blog/:slug");
// Do whatever you want with
return <div />;
}
uRouteMatch 钩⼦也可以:
不接受任何参数并返回当前<Route>
接受单个参数，与matchPath的props参数相同。它可以是⼀个字符串形式的路径名()，也可以是⼀个带有匹配道具的对象，像这样:
singular
const match = uRouteMatch({
path: "/BLOG/:slug/",
strict: true,
nsitive: true
});
<BrowrRouter>
Router使⽤HTML5 History API（(pushState, replaceState and the popstate event）来保证 UI 组件和 URL 同步
<BrowrRouter
baname={optionalString}
forceRefresh={optionalBool}
getUrConfirmation={optionalFunc}
keyLength={optionalNumber}
>
<App />
</BrowrRouter>
baname <string>
基准URL，如果你的应⽤程序是从服务器上的⼦⽬录中提供的，你需要将其设置为⼦⽬录。⼀个正确格式化的baname应该有⼀个开头斜杠，但没有结尾斜杠。
<BrowrRouter baname="/calendar">
<Link to="/today"/> // renders <a href="/calendar/today">
<Link to="/tomorrow"/> // renders <a href="/calendar/tomorrow">
...
美国语伴
</BrowrRouter>
getUrConfirmation <function>
⽤于确认路由跳转的函数。默认使⽤
<BrowrRouter
getUrConfirmation={(message, callback) => {
// this is the default behavior
const allowTransition = firm(message);
callback(allowTransition);
}}
/>
forceRefresh <boolean>
如果值为 true 路由跳转将会刷新整个页⾯。可以使⽤它来模拟传统服务器渲染应⽤程序，路由跳转之间刷新页⾯的⼯作⽅式
<BrowrRouter forceRefresh={true} />
keyLength <number>
location.key的长度。默认为6。
<BrowrRouter 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。在以前的版本中，我们尝试对⾏为进⾏兼容处理，但存在⽆法解决的极端情况。任何需要此⾏为的代码或插件都将⽆法⼯作。由于此技术仅旨在⽀持旧版浏览器，因此我们建议您配置服务器以供使⽤<BrowrHistory>。
php培训
<HashRouter
baname={optionalString}
getUrConfirmation={optionalFunc}
hashType={optionalString}
>
<App />
</HashRouter>
baname <string>
基准URL，如果你的应⽤程序是从服务器上的⼦⽬录中提供的，你需要将其设置为⼦⽬录。⼀个正确格式化的baname应该有⼀个开头斜杠，但没有结尾斜杠。
<HashRouter baname="/calendar"/>
<Link to="/today"/> // renders <a href="#/calendar/today">
getUrConfirmation <function>
⽤于确认路由跳转的函数。默认使⽤
<HashRouter
getUrConfirmation={(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="/cours?sort=name" />
to <object>
具有以下属性:
pathname: <string> 表⽰要链接到的路径
arch: <string> 查询参数
hash: ⼀个放在URL中的Hash，例如 #a-hash.
state: location.state 参数.
to <function>
将当前路由信息作为参数传递，该函数返回string或者object
<Link to={location => ({ ...location, pathname: "/cours" })} />
chine new year<Link to={location => `${location.pathname}?sort=name`} />
replace <boolean>
如果为 true，单击链接时将替换当前历史条⽬，⽽不是添加新条⽬
<Link to="/cours" 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} />
