2.2.1.react-router相关组件，API简介

最新推荐文章于 2023-09-12 17:35:07 发布

「已注销」

最新推荐文章于 2023-09-12 17:35:07 发布

阅读量296

点赞数 1

分类专栏： react简介文章标签： react react-router

本文链接：https://blog.csdn.net/weixin_47870554/article/details/106738016

版权

本文介绍了react-router-dom中包括Router、BrowserRouter、HashRouter、MemoryRouter、NativeRouter、StaticRouter、Route、Switch、Link、Prompt、Redirect等核心组件的用途和参数，详细解析了每个组件的主要功能和使用场景，为理解和应用react-router提供了基础指南。

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

0.前提：

之前的演示，应该已经能大致地了解react-router地相关组件作用了。大致就是使用Router组件包裹Route组件，在Route组件中，使用path对应路径，component对应其他可以渲染出DOM节点的组件，将组件和路径绑定在一起，从而实现路由的功能。

而以下是对其react-router-dom相关的组件地具体描述（都是我看官网，然后自己转化了一下，而且很多只是简介，限于篇幅和时间，我也没具体去实践，只是先记录下来。想要标准原版的话，可以去官网：https://reacttraining.com/react-router/core/guides/quick-start）

1.Router：

Router用来表示路由器的标签，单纯的Router仅拥有所有路由组件的公共参数，一般作为接口，由以下几类组件代替：<BrowserRouter>、<HashRouter>、<MemoryRouter>、<NativeRouter>、<StaticRouter>。

Router接受的参数有children、history。

children：

数据类型是一个组件对象，代表该组件的子组件。

<Router>
  <App />        //Router的子组件
</Router>

history：

数据类型是一个模块对象。个人认为，这大概是对原生的history对象的一个封装，用于保存导航的历史记录（A history object to use for navigation.）。（原生history）

2.BrowserRouter：

通过封装html5的相关API实现路由的相关功能。（A <Router> that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.）

BrowserRouter接受的参数如下：basename、getUserConfirmation、forceRefresh、keyLength、children。