useReactRouter
useReactRouter is a React Hook that provides pub-sub behavior for react-router.Unlike the withRouter Higher-Order Component, useReactRouter will re-render your component when the location changes!
useReactRouter() returns an object that contains the history, location, and match properties that would be passed as props by the HOC.
A tutorial covering the design and development of this package can be found on Medium: How to Convert withRouter to a React Hook.
Why Pub-Sub?
Pub-sub behavior is a common request (that's commonly rejected) for the react-router package.
For users who adamently prefer pub-sub behavior over react-router's suggested alternatives, this package offers a solution.
A non-pub-sub React Hook is anticipated to eventually be included in the react-router package itself.
Install
You must be using react-router and react-router-dom v5.0.0 or greater.
npm install use-react-routeroryarn add use-react-router
Use
Import useReactRouter and use it as a React Hook.
import useReactRouter from 'use-react-router';
const MyPath = () => {
const { history, location, match } = useReactRouter();
return (
<div>
My location is {location.pathname}!
</div>
);
};
Sponsor
��
If you are a fan of this project, you maybecome a sponsorvia GitHub's Sponsors Program.
-
react-router-dom v6 BrowserRouter: 根节点 Routes: 路由配置放在这个标签里面 Route: 配置路由组件的路径和要显示的组件 <Route path='' element=''> <Route index element=''> Link: 导航组件 <Link to=''></Link> NavLink: 导航组件，路由被激活的时候自动添加active类
-
React实现页面路由的模块：react-router-dom 在 React Router 中有三种类型的组件：路由器组件，路由匹配组件，导航组件。这些组件都来自于 react-router-dom。 1 路由器组件：< HashRouter > < BrowserRouter > 对于每一个 React Router 应用来说，都应该有一个路由器组件，它们会为应用创建一个专用的 history
-
react-router-redux import React from "react"; import ReactDOM from "react-dom"; import { createStore, combineReducers, applyMiddleware } from "redux"; import { Provider } from "react-redux"; import
-
React-Router-Dom 1. React-Router react-router是一个核心库，我们在做PC端时要用react-router-dom,而在移动端我们要用React-Router-Native 2.React-Router-Dom 这个库是专门做PC端的路由 2.1 在React-cli项目中安装React-Router-Dom npm i react-router-dom
-
react-router-dom v6 版本使用内容详解 1.路由组件 (1-1) v6 方式一 react-router-dom 常规 (1-2) v6 方式二 react-router-dom 使用 useRoutes 2.页面跳转 (2-1) Link 组件跳转 (2-2) useNavigate hooks跳转，代替useHistory 3.获取路由的参数 (3-1) use
-
1.下载包 yarn add react-router-dom 2. 常用HOOK useHistory：返回 history 对象，可以使用 useHistory 进行导航； useLocation：返回当前URL的 location 对象，每当URL发生变化时，它都会返回一个新的位置； useParams：动态参数列表的引用对象，用于获取<Route>中的 match.params (动态参
-
1、安装 npm install react-router-dom@6 -S 2、路由传值的三种方式 （1）params参数 路由链接（携带参数） <Link className="nav" to={`/b/child2?age=20&name=zhangsan`}>Child2</Link> 或 <Link to={`/b/chil
-
React 路由 react-router-dom 一个路由就是一个映射关系（key:value) key为路径，value是component 路由的实现是基于history BrowserRouter和HashRouter 监听 URL 的变化，当 URL 变更时，它将使浏览器显示相应的页面 所以需要包裹在需要使用组件路由的最外层 import ReactDOM from 'react-dom
-
一、基本使用 安装依赖 npm i react-router-dom 引入实现路由所需要的组件及组件页面 import { BrowserRouter, Routes, Route } from "react-router-dom"; import Page1 from "./Page1"; import Page2 from "./Page2"; function App() { retu
-
一、基本用法 react-router安装命令 npm install -S react-router-dom 安装完了依赖关系，在代码编辑器中打开 package.json 文件，你会看到 react-router-dom 库的依赖版本。 “dependencies": { // 安装的其余依赖项 "react-router-dom": "^6.2.1", }, 二、创建第一个路由 要使用
-
前言 目前正在学习react router，了解到v5和v6版本具有较大差异。本文将结合源代码详细说明react router v6中发生改变的以及新增的hooks 通过阅读本篇文章，你将了解： useHref useInRouterContext useLocation useMatch useNavigate useNavigationType useOutlet useParams useS
-
react-router-dom V6中使用useNavigate 最近在网上学习React编程式路由时跟着视频上的步骤写了之后发现V6版本有些变化，踩了不少的坑，在这里总结以下 1.编程实现路由导航 在以前的版本中可以直接使用this.props.history.push()和this.props.history.replace()来传递参数。 但在V6中开始使用useNavigate()了，如
-
博主来学react啦，真的挺多坑的相比vue，文档和版本很乱，一开始我不知道React-router-dom和React-router有啥区别，资料也不全，就下了React-router然后百度出了一个0.x的版本的文档出来，我也是佛了，就各种错误，才知道原来最新是React-router-dom，文档地址是https://reactrouter.com/docs/en/v6/api#useloc
-
react-use-localstorage depends on stable v16.8.1~ Access Local Storage using React hooks. Fork it on CodeSandbox How to use it import React from 'react';import ReactDOM from 'react-dom';import useLoca
-
React-use-context-selector 是一个基于 Context API 的封装，应用于 useland 的 React useContextSelector hook，可优化 Context 导致的 rerender 问题。虽然存在部分限制，但可以通过这个设计实现更好了解 Context API。 用法 import React, { useState } from 'react
-
问题内容： 我一直在努力解决这个问题，但没有找到一个强有力的答案。我正在尝试使用useMutation挂钩执行登录突变。 TLDR； 我想知道在onError中传递的选项和useMutation给我的错误之间到底有什么区别 这是我的代码段 在服务器端，我有一个用于登录的预设/硬编码电子邮件，并且我没有使用Apollo或任何其他客户端。在此登录突变的解析器中，如果使用的电子邮件不相同，我只会抛出一个
-
所以我正在重写一个带有钩子的组件，我遇到了一个有趣的挑战，我需要用钩子模仿的一些旧行为。 我的旧代码如下所示： 你看，我正在基于nextrops启动一个，然后在语句中，我基于该nextVal进行了一些检查，现在，我知道我们可以为指定第二个参数，以便仅在道具更改时运行它，但是这些检查呢，如何实现类似于？
-
描述 (Description) 此函数将MODULE导出的所有函数或仅LIST引用的函数导入当前包的名称空间。 有效地相当于 - BEGIN { require "Module.pm"; Module->import(); } 也用于在当前脚本上强加编译器指令（pragma），尽管这些只是模块。 请注意，在编译时会评估use语句。 在执行时评估require语句。 如果Module和LIST之
-
错误： ./src/containers/administration/dwConnections/switch。js第11:6行：React Hook useEffect缺少依赖项：“enabled”。包括它或删除依赖项数组react hooks/dep