react-router-dom
主要由三个类别的组件
- 路由器：
, - 路由匹配器：
, - 导航：,
,
也称导航组件为路由改变组件。
每个React Router应用程序的核心都应该是一个路由组件（Route）。
对于一个web应用而言，主要由两个路由组件
他是最常规的URL路径，需要配置于路由路径一直的服务端，在react中支持开箱即用。
无状态的路由。
将当前位置存储在URL的哈希部分，因此URL看起来像是：http://example.com/#/your/page
由于hash值永远不会被传递到后端服务，因此，不需要特殊的服务器配置。
路由匹配器
有两个路由匹配器
当使用
如果没有找到对应的
注意：
<div>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/contact/:id">
<Contact />
</Route>
<Route path="/contact">
<AllContacts />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
ReactDOM.render(
<Router>
<App />
</Router>
)
导肮
组件用来在应用中创建一个链接，无论在何处使用组件，都见在HTML文档中创建一个锚点() ```jsx Home//等同于
## <NavLink>
<NavLink>是一个特殊的<Link>，当他的‘to’属性匹配到当前位置时，它可以将自身设置为 ‘active’ 状态。
```jsx
<NavLink to="/react" activeClassName="hurry">
React
</NavLink>
//当URL时 /react 时，这个组件将会渲染：
<a href="/react" className="hurry">React</a>
//当URL时其他时，将会渲染：
<a href="/react">React</a>
在任何时候如果想使用强制导航，都可以使用
<Redirect to="/login" />
API
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
返回表示当前URL的位置对象。类似于useState，它在URL改变时返回一个新的位置。
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>;
}
ReactDOM.render(
<Router>
<App />
</Router>,
node
);
useParams
返回URL参数的键/值对对象，使用它来访问当前
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>;
}
ReactDOM.render(
<Router>
<Switch>
<Route exact path="/">
<HomePage />
</Route>
<Route path="/blog/:slug">
<BlogPost />
</Route>
</Switch>
</Router>,
node
);
useRouteMatch
该钩子函数尝试以与
import { Route } from "react-router-dom";
function BlogPost() {
return (
<Route
path="/blog/:slug"
render={({ match }) => {
// Do whatever you want with the match...
return <div />;
}}
/>
);
}
//可以使用以下代码替换
import { Route } from "react-router-dom";
function BlogPost() {
return (
<Route
path="/blog/:slug"
render={({ match }) => {
// Do whatever you want with the match...
return <div />;
}}
/>
);
}
//或者
import { Route } from "react-router-dom";
function BlogPost() {
return (
<Route
path="/blog/:slug"
render={({ match }) => {
// Do whatever you want with the match...
return <div />;
}}
/>
);
}
这是一个
该组件包含以下5个属性：
- basename: string
有前导斜杠没有结尾斜杠。 - getUserConfirmation: func
确认导航，默认使用window.confirm - forceRefresh: bool
整个页面强制刷新。 - keyLength: number
location.key 的长度，默认是6 - children: node
渲染的子元素
<browserRouter
basename="/calendar"
getUserConfirmation={(message, callback) => {
// this is the default behavior
const allowTransition = window.confirm(message);
callback(allowTransition);
}}
forceRefresh={true}
keyLength={12}
>
<Link to="/today"/> // renders <a href="/calendar/today">
<Link to="/tomorrow"/> // renders <a href="/calendar/tomorrow">
...
</browserRouter>
- basename: string
有前导斜杠没有结尾斜杠。 - getUserConfirmation: func
确认导航，默认使用window.confirm - hashType: string
window.location.hash的字符编码类型，可选值：
+ slash (default)
例如：#/ 和 #/sunshine/lollio
+ noslash
例如：# 和 #sunshine/lollio
+ hashbang
例如：#!/ 和 #!/sunshine/lollio - children: node
围绕应用程序提供声明性的可访问导航
-
to: string
-
to: object
- pathname
- search
- hash
- state
-
to: func
-
innerRef: func
-
innerRef: RefObject
-
components: React.Component
如果想使用自己的导航组件，可以使用这个属性。 -
others
- className: string | func
- activeClassName: string
- style: object | func
如果使用函数，链接状态将作为参数传递。之后的版本中将会删除该属性，使用函数样式代替内联样式。<NavLink to="/faq" style={isActive => ({ color: isActive ? "green" : "blue" })} > FAQs </NavLink> - activeStyle: object
active状态下显示该属性的样式。<NavLink to="/faq" activeStyle={{ fontWeight: "bold", color: "red" }} > FAQs </NavLink> - exact: bool
如果为true，则仅当loaction完全匹配时，才会应用active的样式。<NavLink exact to="/faq"> FAQs </NavLink> - strict: bool
<NavLink strict to="/faq"> FAQs </NavLink> - isActive: func
<NavLink to="/events/123" isActive={(match, location) => { if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 </NavLink> - location: object
isActive比较当前历史位置（通常时当前浏览器URL）。要与不同的位置进行比较，可以传递一个位置 - aria-current: string
- to: string
- to: object
- push: bool
- from: string
- exact: bool
- strict: bool
- sensitive: bool
一个
- initialEntries: array
- initialIndex: number
- getUserConfirmation: func
- keyLength: number
- children: node
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
