React Router Dom API 中文文档

最新推荐文章于 2024-09-28 17:19:58 发布

debbyDeng

最新推荐文章于 2024-09-28 17:19:58 发布

阅读量1.5w

点赞数 1

分类专栏： React React Router 文章标签： React Router DOM API

本文链接：https://blog.csdn.net/debbyDeng/article/details/84555817

版权

本文档详细介绍了React Router DOM API的各种组件和属性，包括BrowserRouter、HashRouter、Link、NavLink、Redirect、Route、Switch等。讲解了如何设置basename、getUserConfirmation，以及不同路由类型的特点和使用场景，如history API、hashHistory和memoryHistory。同时，阐述了Route的渲染方法、path匹配规则和组件交互。

摘要由CSDN通过智能技术生成

`<BrowserRouter>`

<Router>的一种，通过使用HTML5提供的history API(pushState,replaceState,propstate)机制来维持页面UI同RUL的统一。

Props

basename: 该router下路由路径的base url. 应该有一个前置斜杠，但不能有后置斜杠。如果你的页面路由路径为某个子目录，那base url应设置为这个子目录。该页面的其他路由路径即在这个之下。

<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="/calendar/today">

getUserConfirmation: 路由跳转的二次确认函数，用来拦截Prompt组件, 默认情况下使用window.confirm弹框

<BrowserRouter basename={'/home'} getUserConfirmation={setConfirmation}>
         <div>
          <Prompt message={'Are you sure to leave'}/>
         <Link to={'/test'}>ceshi</Link>
         <Route path={'/test'} component={Test}/>
         </div>
 </BrowserRouter>

forceRefresh: 布尔值，为true时, router在进行路由跳转的时候会进行页面刷新，可能只在浏览器不支持H5 history api的情况下需要使用。
keyLength: 自定义location.key的长度，默认为6. location.key 或者location.state(废弃)可以用来保存页面滚动条位置。
children: 需要渲染的‘单个reactNode元素组件’