React router v6 history.listen
基础概念
history.listen 是 React Router v6 中的一个方法，用于监听浏览器历史记录的变化。它允许你在路由变化时执行一些操作，比如记录日志、更新页面标题等。
相关优势
- 实时响应路由变化：通过
history.listen，你可以实时获取路由变化的信息，并根据这些信息执行相应的操作。 - 灵活性：你可以根据需要监听特定的路由变化，而不是全局监听所有路由变化。
- 解耦：将路由变化的监听逻辑与组件逻辑分离，使代码更加清晰和易于维护。
类型
history.listen 是一个函数，它接受一个回调函数作为参数。当路由发生变化时，这个回调函数会被调用。
应用场景
- 记录用户行为：通过监听路由变化，你可以记录用户在应用中的行为路径。
- 动态更新页面标题：根据当前路由动态更新页面标题，提升用户体验。
- 权限控制：在路由变化时检查用户的权限，根据权限决定是否允许访问某个页面。
示例代码
import { createBrowserHistory } from 'history';
import { Router } from 'react-router-dom';
const history = createBrowserHistory();
history.listen((location, action) => {
console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`);
console.log(`The last navigation action was ${action}`);
});
function App() {
return (
<Router history={history}>
{/* Your routes here */}
</Router>
);
}参考链接
常见问题及解决方法
1. history.listen 未触发
原因：可能是由于 history 对象未正确传递给 Router 组件。
解决方法：确保 history 对象正确传递给 Router 组件。
<Router history={history}>
{/* Your routes here */}
</Router>2. 回调函数参数不正确
原因：可能是由于回调函数的参数不正确，导致无法获取到预期的路由信息。
解决方法：确保回调函数的参数正确，通常为 location 和 action。
history.listen((location, action) => {
console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`);
console.log(`The last navigation action was ${action}`);
});3. 在组件卸载后仍然监听
原因：如果在组件卸载后仍然监听路由变化，可能会导致内存泄漏。
解决方法：在组件卸载时取消监听。
import { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
const unlisten = history.listen((location, action) => {
console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`);
console.log(`The last navigation action was ${action}`);
});
return () => {
unlisten();
};
}, []);
return <div>My Component</div>;
}通过以上方法，你可以有效地使用 history.listen 来监听路由变化，并解决常见的相关问题。
相关·内容
我正在尝试将旧的反应性路由器dom代码迁移到v6，我想知道如何侦听路由更改，我现在正在使用useHistory。
const history = useHistory()
//then
history.listen(...)
我确实读过新的文档，发现useHistory被更改为useNavigate。
const navigate = useNavigate()
//then
navigate.listen(...) // listen is not a function
你能帮我找个办法听v6的路线改变吗？
// This is a React Router v6 app
import {
浏览 13提问于2022-01-09得票数 23
回答已采纳
因此，在以前的一个使用Google的应用程序中，我有一个<RouteChangeTracker/>的组件，这个组件会监听url的更改，然后传递给ReactGA，这样GA就知道用户在看哪个页面了。然而，在react-router-dom v6中，这些特性是缺失的，不缺少，但它们已经将功能转移到useLocation和useNavigate中，但是附加到它们的方法已经改变了，我试图重构组件以使其在v6中可用，这里有人能帮我吗？
下面是前面设置的代码
import React from "react";
import { withRouter } from "re
浏览 13提问于2021-12-27得票数 2
尽管检查了堆溢出上已经发布的所有答案，我还是找不到我的案例的解决方案，所以我会发布它。
我正在使用{路由器} from‘react路由器(v6)，以便能够使用自定义历史对象在redux操作中导航。
这是我的档案：
index.tsx
import { Router } from 'react-router';
import myHistory from './utils/history';
ReactDOM.render(
<Provider store={store}>
<Router navigator={myHisto
浏览 9提问于2022-01-04得票数 4
react router. 6.4.2不允许history.listen，如下面的代码示例所引用的那样。这是一个mfe与模块联合。
在使用history.listen的代码示例中，如果在远程(加载为mfe)中单击链接，则将更新内存历史记录(现在是内存路由器)当前路径。然后，它将调用onNavigate，告诉正在使用浏览器历史记录(现在是浏览器路由器)的主机容器，当前路径已经更改。
以前的建议是使用UNSAFE_NavigationContext、useHistory、unstable_HistoryRouter、从“历史”导入{.}等等。显然，以前的那些方法都是从v5到v6.3的临时迁移辅助工
浏览 38提问于2022-10-22得票数 3
回答已采纳
因此，在我的react/redux应用程序中，我使用。我想添加一个简单的“顶部条”加载动画为任何路由(如LOCATION_CHANGE)序列。
我知道像这样的东西，但不知道如何将它们绑定到react-router-redux中，因为我只是导入一个预制造的减速器，比如：
import { routerReducer } from 'react-router-redux'
我如何将动画绑定到这个减速机中，是否有任何解决方案已经准备就绪？似乎是一个常见的用例。我宁愿不必创建另一个听react-router-redux动作的还原器，这似乎有点麻烦……
浏览 0提问于2017-02-07得票数 2
回答已采纳
每当路由更改时，我将使用Scroll组件滚动到顶部：
Scroll.js
import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';
function ScrollToTop({ history }) {
useEffect(() => {
const unlisten = history.listen(() => {
window.scrollTo(0, 0);
});
return () =>
浏览 2提问于2020-09-15得票数 0
回答已采纳
syncHistory from react-router-redux接受一个来自react-router的browserHistory参数。在服务器上，调用syncHistory(browserHistory)并不真正有效。我正在尝试用中间件创建一个商店：
const { syncHistory } from 'react-router-redux'
const { browserHistory } from 'react-router'
const { createStore, applyMiddleware } from 'redux'
浏览 4提问于2016-02-02得票数 3
我有一个特定的组件，希望在每次用户导航时得到通知。有什么方法可以访问传入路由器的历史记录吗？
<Router history={history}>
{// ...}
</Router>
子组件：
var Component = React.createClass({
componentDidMount: function() {
// history.listen(this.onRouteChange);
},
onRouteChange: function() {},
render: function() {...},
});
浏览 0提问于2016-11-22得票数 8
回答已采纳
App.js
import React, {Component} from 'react';
import './App.css';
import About from './about';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
class App extends Component {
render() {
return (
<Router>
<div cl
浏览 5提问于2022-02-26得票数 2
回答已采纳
import './App.css';
import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
浏览 6提问于2022-04-19得票数 3
回答已采纳
1回答
我试着做一个简单的反应路由器。但这根本不管用。如果我不包括<Routes>标记，那么页面是空的。在包含<Routes>标记之后，它也无法工作。请看一下。
import React from 'react';
import './App.css';
import Nav from './Nav';
import About from './About';
import Shop from './Shop';
import{ BrowserRouter as Router, Switch, Ro
浏览 7提问于2022-05-13得票数 1
回答已采纳
页面应该只在路径名改变时滚动到顶部，React.memo应该只在路径名改变而不是queryparams改变时返回true。但是，即使当更新返回false时，页面也会滚动到顶部。
const shouldUpdate = (prevProps, nextProps) => {
return prevProps.location.pathname !== nextProps.location.pathname;
};
const ScrollToTop = ({ history }) => {
useLayoutEffect(() => {
const unli
浏览 8提问于2021-06-15得票数 0
我正在尝试使用react-ga库来实现Google，只要路由发生变化，它就需要触发。我在App.js中有以下设置：
import createBrowserHistory from 'history/createBrowserHistory';
...
const history = createBrowserHistory();
history.listen((location) => {
console.log('ANALYTICS CODE GOES HERE', location);
});
class App extends Comp
浏览 5提问于2017-04-20得票数 4
如何在react-router-dom v6中在单一路由中呈现多个组件？
function App() {
return (
<Router>
<div className="app">
<Switch>
<Route path="/checkout">
<Header />
<Checkout />
</Route>
<Ro
浏览 6提问于2022-09-03得票数 1
当我在我的React应用程序中使用ScrollToTop组件时，我会在浏览器中得到以下警告：
第12:6行: React缺少一个依赖项：“历史”。要么包含它，要么删除依赖数组react/react。
import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';
function ScrollToTop({ history }) {
useEffect(() => {
const unlisten = history.listen(() =&
浏览 0提问于2021-02-14得票数 0
回答已采纳
1回答
我试图理解路由器的基础知识，并对下面的代码有疑问
import React from "react";
import { render } from "react-dom";
import Logo from "./Logo";
import { Router, Link } from "@reach/router";
let Home = () => (
<div>
<h1>Home</h1>
<nav>
<Link to="/
浏览 1提问于2018-07-08得票数 3
2回答
我不能在反应性路由器(特别是react-router-dom). )中使用“交换机”或“路由”。由于对于使用哪一种方法( Switch还是Routes )似乎有点困惑，所以我决定尝试这两种方法，以达到目的。
我使用的是react路由器-dom版本：
"react-router-dom": "^6.2.1",
如果我这样进口：
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
编译器说Cannot resolve symbol 'Routes&
浏览 15提问于2022-01-11得票数 5
我一直试图设置react + react-router + redux + redux-simple-router，但没有成功。在我将redux-simple-router添加到混合物之前，一切似乎都很好，然后我得到了
"[TypeError: Cannot read property 'listen' of undefined]，尽管我传递的是BrowserHistory对象。
这是密码-
import React from 'react'
import ReactDOM from 'react-dom'
import { Route,
浏览 1提问于2016-01-22得票数 4
2回答
我是新的反应，我是使用反应路由器在应用中的路由.
我的app.jsx文件是：
import React from "react";
import Home from "./Home";
import { Router, Route, Link } from "react-router-dom";
import { history } from './history';
class App extends React.Component {
constructor(props) {
super(props);
浏览 1提问于2018-10-29得票数 2
回答已采纳
我正在使用react-router-redux@5.0.0-alpha.9，而且我还没有找到在服务器端呈现上捕获<Redirect> URL的解决办法。
用例：
未标识的用户试图访问安全路由，<Redirect>将用户发送到登录路由。
已经登录的用户尝试访问登录表单，<Redirect>将用户发送到主私有路由。
现在，重定向正在浏览器中进行，但是提供一种捕获<Redirect> URL并从服务器发送正确重定向的方法将是很好的。
我想做一些类似于<StaticRouter>解决方案的事情(使用context和<Co
浏览 1提问于2018-01-18得票数 0
回答已采纳
2回答
如果删除react路由器DOM，我可以看到报头组件输出。但是如果我添加路由器，我什么也看不见，页面是空白的，甚至没有错误或警告。我试过所有可能的方法，但都没成功。如何解决这个问题？
我的代码部分：
import React from 'react';
import {BrowserRouter as Router, Routes, Route} from "react-router-dom";
<Header />
{/* <section className='mt-24 p-8 w-full'> */}
&l
浏览 3提问于2022-04-06得票数 1
当使用<Link>测试组件时(例如，在我对的回答中)，我经常使用以下模式来访问当前的location以进行测试：
const renderInRouter = () => {
const history = createMemoryHistory();
const wrapper = render(
<Router history={history}>
<MyPage />
</Router>
);
return { ...wrapper, history };
}
这在v5.3之前运行得很好，但
浏览 13提问于2021-11-05得票数 13
回答已采纳
我想在一个深度嵌套子组件中使用history.listen来监听位置变化。
顶层具有this.props.history的父组件是否应该向下传递所有道具至下子组件？
我正在使用2.8.1 react-router
我愿意升级到较新的版本，如果它允许我很容易做到这一点。
浏览 11提问于2017-03-11得票数 1
回答已采纳
我正在尝试让GA跟踪所有被React Router v4更改的页面。
我见过使用以下库的代码: react-ga
history.listen(location => {
// ReactGA.set({ page: location.pathname })
// ReactGA.pageview(location.pathname)
})
但我不认为这会记录第一页。
我看过这个，但我不知道如何在我的网站上设置它
我的index.js看起来像这样
ReactDOM.render(
<Provider routingStore={routingStore} domainS
浏览 12提问于2019-11-22得票数 0
我们使用我们自己的内部路由组件来跟踪react-router-dom v5的路线。看上去大概是这样的：
import { Switch, Route } from 'react-router-dom';
// EDIT: This was React-Router v5 code, in v6 <Switch> is replaced by <Routes>
// and <Route component={}> is replaced by <Route element={}>
const routes = ()
浏览 35提问于2022-08-29得票数 2
回答已采纳
在从React路由器Dom v5切换到v6后，我遇到了一个问题。
我遇到了一个我无法解决的错误。
Uncaught :无法破坏“匹配”的属性“路径”，因为它是未定义的。
以下是我的app.jsx的样子
...
import { Home } from "home";
import { Listings } from "listings";
import { Navigate, Route, Routes, unstable_HistoryRouter as Router } from "react-router-dom";
...
impor
浏览 13提问于2022-05-21得票数 0
2回答
如何滚动到顶部的路由更改与反应路由器dom v6？
我已经尝试过这个，，这是我的解决方案，当我使用react-router-dom v5时，当我使用react-router-domv5时，它会让我的页面滚动到路径改变的顶部。现在，我正在使用react-router-dom v6，但此解决方案不起作用。
我尝试过，但对我不起作用。
我尝试过使用preload属性来触发scrollTo(0,0)的，它对我也不起作用。
浏览 7提问于2021-12-02得票数 2
我快疯了，我正在使用react-router-dom，当我从A页转到B页的时候，我希望它从页面的顶部开始，到处都是。我尝试过不同的方法，比如：
componentDidUpdate(){
console.log('hello');
document.documentElement.scrollTo(0, 0)
}
&
componentDidUpdate(){
console.log('hello');
window.scrollTo(0, 0)
}
&
import { useEffect
浏览 2提问于2021-12-03得票数 0
我使用的v5的反应-路由器-多姆.
npm ls --depth=0 | grep 'react-router-dom'
├── @types/react-router-dom@5.3.2
├── react-router-dom@5.3.0
但是，我得到了一个错误，比如类型定义引用了v6。
Type '{ exact: true; path: string; component: FC<{}>; }' is not assignable to type 'IntrinsicAttributes & (PathRouteProps |
浏览 1提问于2021-12-02得票数 1
我遇到了反应路由器的问题。开关现在被路由所取代。但是，我在浏览器中得到了一个空白屏幕。没有错误，只有一个空白的屏幕。我将非常感谢你的解释。
App.js
import React from 'react';
import Navbar from './components/Navbar';
import {BrowserRouter as Router} from 'react-router-dom';
import { Routes ,Route } from 'react-router-dom';
import './
浏览 4提问于2022-08-04得票数 0
3回答
我刚开始使用react-router V4，我想知道如何获取路由器的当前位置
这是我的源代码
import {Meteor} from 'meteor/meteor';
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import createHistory from 'history/createBrowserHistory'
import {Route, BrowserRouter as Router, Switch} from
浏览 7提问于2017-04-14得票数 8
在这个v5之后，我从React路由器v6迁移到了v6。我想用测试它，但是我的旧单元测试(在中使用模式)停止了工作。
我的React路由器v6应用程序是这样的
const router = createBrowserRouter([
{
path: "/",
element: (
<>
<SiteHeader />
<Outlet />
</>
),
浏览 13提问于2022-11-11得票数 1
回答已采纳
1回答
我已经设法用ReactGA library为我的React应用程序设置了Google Analytics，这样当用户导航时，它就会将页面视图发送给analytics。 问题所在 我面临的问题是，我不会在初始页面加载时向谷歌发送任何分析，因为history.listen方法只在位置更改时触发。 我的设置 在我的项目根目录中，我初始化连接： const history = require("history").createBrowserHistory;
import { Router } from "react-router-dom"
ReactGA.initi
浏览 29提问于2019-12-06得票数 0
我正在尝试使用React路由器和路由，但是不断地得到这个错误：
我尝试了以下几点：
删除和重新安装react-router.deleting --路由器-dom和node_modules文件夹，并运行npm安装以确保react路由器和react-dom是相同的版本是的，我在上面列出的每一次尝试之后都重新启动了服务器。
以下是我的index.js代码：
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App fr
浏览 6提问于2021-06-08得票数 8
回答已采纳
因此，我已经测试了这个新鲜的原始CRA 5(类型记录)应用程序。在App.tsx中，我刚刚将它的内容替换为：
import { Router, Routes, Route, Link } from "react-router-dom";
import "./App.css";
interface IProps {
appHistory: any;
}
function App(props: IProps) {
const { appHistory } = props;
return (
<div className="Ap
浏览 4提问于2022-04-14得票数 1
回答已采纳
我有以下react组件
import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';
function ScrollToTop({ history }) {
useEffect(() => {
const unlisten = history.listen(() => {
window.scrollTo(0, 0);
});
return () => {
unlisten();
}
浏览 0提问于2020-11-26得票数 0
1回答
我试图在电子js应用程序中使用react路由器v6。
但对我不起作用。
这个应用程序正确工作，而不实现反应-路由器！
当我使用react路由器v6时，我将在控制台中得到这条消息，而不会显示内容。
无路由匹配位置
项目结构
在此项目中，index.html文件在build文件夹中加载app.js。
index.js
App.jsx
import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom
浏览 5提问于2022-04-27得票数 1
回答已采纳
1回答
我已经用React Router以以下方式设置了React-ga：
...
import { Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import {Provider} from 'react-redux';
import ReactGA from 'react-ga';
ReactGA.initialize('MY TRACKING CODE', {
debug:
浏览 20提问于2018-02-27得票数 1
回答已采纳
我得到了一个错误：
Error: Invariant failed: You should not use <Switch> outside a <Router>
但让我发疯的是，我的“开关”标签实际上被“BrowserRouter”包围着。
import {BrowserRouter, Route} from "react-router-dom";
import {Switch} from "react-router";
....
function App() {
return (
<AuthContext
浏览 8提问于2021-12-11得票数 1
回答已采纳
我找不到我想要的答案，所以我想我会自己写一篇文章，这样人们就可以找到它了。
对于那些无法为NavLink、v5包装器react-router v6而需要使用它的人，styled-components可以读取activeClassName。
据我所知，在通过样式组件对NavLink (v6)进行样式化时，如果没有这个包装器，就不能使用它。
import React, { CSSProperties } from 'react'
import { NavLink as BaseNavLink, NavLinkProps } from 'react-router-dom
浏览 14提问于2022-07-15得票数 1
在App.js中添加路由路径中的组件时，出现以下错误。知道为什么会这样吗？
router.ts:5未明错误: AboutUs不是一个组件。所有组件的子级必须是a或<React.Fragment> at变量(router.ts:5:1)、components.tsx:291:1、react.development.js:1195:1、react.development.js:1158:1和mapIntoArray (react.development.js:104 )。
import React, { useState } from 'react';
import {
浏览 3提问于2022-04-22得票数 0
回答已采纳
我很少实践，但是当我将路由器加载到react-router-dom v6中的新“项目”中时，屏幕变成了白色，就像我编译错了路由器一样。
import React from "react";
import ReactDom from "react-dom";
import {BrowserRouter, Route, Routes } from "react-router-dom";
import { about } from ".//views/about.js"
export default function App() {
浏览 6提问于2022-03-31得票数 2
回答已采纳
我安装了react router v6，我想使用一个基于类的组件，在以前的react版本中，路由器-dom v5 this.props.history()在做了一些事情之后为重定向页面工作，但是这段代码不适用于v6。
在react路由器-dom v6中，函数组件有一个钩子useNavigate，但是我需要在类基组件中使用它，请帮助我如何在类组件中导航？
浏览 6提问于2021-11-28得票数 21
我安装了"react-router-dom": "^6.0.0-beta.0"并创建了一些页面路由。如果不存在页面，则Page404 / NotFound组件将无法工作。由于某些原因，当我使用动态页面/post slug时，如果没有带有此ID的页面/帖子，组件NotFound将无法工作。
在React路由器中是否有解决此问题的选项？
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import AllPosts from "compon
浏览 3提问于2021-03-08得票数 1
我注意到，当我访问一个路由时，当我使用<Link>时，页面会自动滚动到底部，我有点困惑，因为它正在工作，我得到了页面，但是它通过这种行为自动滚动到底部。
这是路由器：
import {Link,Routes,Route,Navigate} from 'react-router'
const App = () => {
const user=true
return <div>
<Routes>
<Route exact path='/' element={<Home/>} /
浏览 6提问于2022-01-10得票数 -1
回答已采纳
我使用的是Reacti15.4.2和react-router4.0.0，这个项目是用引导的。
这是我的密码。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
const AboutPage = () => {
return(
<section>
浏览 2提问于2017-03-31得票数 22
回答已采纳
我正在尝试在react路由器v6中使用多条路径/路由来呈现相同的组件
使用早期版本的，我可以这样做，它可以工作：
<Route exact path={["/", "/home"]}>
<Home />
</Route>
<Route exact path={"/" | "/home"}>
<Home />
</Route>
现在使用v6，我尝试了同样的方法，但是它不起作用
<Route exact path={["/
浏览 16提问于2021-12-04得票数 6
回答已采纳
我对打字和反应比较陌生。
接下来的教程中，我尝试从"react-router-dom"中添加"react-router-dom"，但是我在说Module '"react-router-dom"' has no exported member 'withRouter'.时出错了
在react路由器-dom节点-模块包中，没有对withRouter的引用.这让我很困惑，我也不知道打字稿是否是缺少的函数的来源。我知道他们已经删除了一些功能，但是为了从组件内部访问this.props.history.push()，我找不到
浏览 5提问于2022-01-09得票数 1
我希望能够在每次响应确认url已经更改时调用一个函数，但是history.listen没有触发( console.log从来没有打印)有问题。我见过一些帖子说这是因为我使用了BrowserRouter，但是每当我尝试从react路由器导入任何东西时，我都会遇到错误，上面写着“无法在react路由器中找到x”。我现在有react路由器和react路由器-dom版本4.1.2
App.js
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import
浏览 1提问于2018-02-20得票数 2
我曾经能够在<= v4中将历史传递给React路由器：
import { Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
<Router history={history}>
<App />
</Router>
编辑:我错了，我以前用的是Router，而不是需要的BrowserRouter。BrowserRouter可能
浏览 2提问于2020-02-04得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
