路由信息【React】

发布网友 发布时间：2024-09-29 08:33

我来回答

共1个回答

热心网友 时间：2024-11-17 21:55

Router组件会创建一个上下文，并且，向上下文中注入一些信息。

该上下文对开发者是隐藏的，Route组件若匹配到了地址，则会将这些上下文中的信息作为属性传入对应的组件。

它并不是window.history对象，我们利用该对象无刷新跳转地址。

为什么没有直接使用history对象

React-Router中有两种模式：Hash、History，如果直接使用window.history，只能支持一种模式。

当使用windows.history.pushState方法时，没有办法收到任何通知，将导致React无法知晓地址发生了变化，结果导致无法重新渲染组件。

push：将某个新的地址入栈（历史记录栈）

参数1：新的地址

参数2：可选，附带的状态数据

replace：将某个新的地址替换掉当前栈中的地址

go:与window.history一致

forward:与window.history一致

back:与window.history一致

与history.location完全一致，是同一个对象，但是，与window.location不同。

location对象中记录了当前地址的相关信息。

我们通常使用第三方库query-string，用于解析地址栏中的数据。

该对象中保存了，路由匹配的相关信息。

isExact：事实上，当前的路径和路由配置的路径是否是精确匹配的。

params：获取路径规则中对应的数据。

实际上，在书写Route组件的path属性时，可以书写一个stringpattern（字符串正则）。

react-router使用了第三方库：Path-to-RegExp，该库的作用是，将一个字符串正则转换成一个真正的正则表达式。

向某个页面传递数据的方式：

使用state：在push页面时，加入state

利用search：把数据填写到地址栏中的？后

利用hash：把数据填写到hash后

params：把数据填写到路径中

某些组件，并没有直接放到Route中，而是嵌套在其他普通组件中，因此，它的props中没有路由信息，如果这些组件需要获取到路由信息，可以使用下面两种方式：

将路由信息从父组件一层一层传递到子组件

使用react-router提供的高阶组件withRouter，包装要使用的组件，该高阶组件会返回一个新组件，新组件将向提供的组件注入路由信息。