精华内容
下载资源
问答
  • 主要介绍了React-router4路由监听的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • react全局监听路由变化

    千次阅读 2020-07-02 13:24:52
    通过withRouter将三个属性传入组件的props上,路径变化,属性就会变化,属性变化,就会触发componentWillReciveProps这个钩子,我们可以利用这个钩子做一些处理,而要监听路由变化,就要监听整个项目的路由,所以...

    关于WithRouter

    作用:把不是通过路由切换过来的组件中,将react-router 的 history、location、match 三个对象传入props对象上

    介绍一个简单应用

    通过withRouter将三个属性传入组件的props上,路径变化,属性就会变化,属性变化,就会触发componentWillReciveProps这个钩子,我们可以利用这个钩子做一些处理,而要监听路由的变化,就要监听整个项目的路由,所以我们要找到最大的组件 最大的组件是App,但是他是函数式组件,所以我们找到下一级组件Main

    Main.js

    //当从浏览器中直接输入地址时,withRouter将路由属性传入Main组件的this.props中,通过componentWillReceiveProps全局监测到路由变化,进行逻辑操作
    import { withRouter } from 'react-router-dom' //引入withRouter
    class Main extends Component {
      constructor(props) {
        super(props)
        this.state = {
        }
      }
      componentWillReceiveProps(nextProps) {
        if (nextProps.location.hash !== this.props.location.hash) {
          window.leftMenu.forceUpdate(); //当路由不同时,强制更新左边栏组件
        }
      }
      render() {
        return (
            <div>
              <Header/>
              <LeftMenu ref={el => {window.leftMenu = el}}/>
              <Module/>
            </div>
        )
      }
    }
    export default withRouter(Main)  //包裹

    App.js

    根组件中需要使用BrowserRouter包裹,否则会报错信息 You should not use <Route> or withRouter() outside a <Router>

    import { BrowserRouter } from "react-router-dom";
    function App() {
      ReactDOM.render(
        <BrowserRouter>
          <ConfigProvider locale={locale}>
            <Main />
          </ConfigProvider>
        </BrowserRouter>,
        document.getElementById("root")
      );
    }
    App()
    if (module.hot) {
      module.hot.accept('./view/Main.js', function () {
        App()
      })
    }
    

     

     

    展开全文
  • 我想要用 <a href="https://reactnavigation.org/"><strong>React Navigation</strong></a> 5.X 能够全局监听路由变化,已保证路由变化时中断正在进行的请求。官方文档实在是看的一头雾水,求求各位...
  • "react":"^16.13.1", "react-router-dom":"^5.2.0", 2.在入口文件添加以下代码 import { withRouter } from "react-router-dom"; componentDidUpdate() { console.log("===",window.location.path..

    参考:https://blog.csdn.net/weixin_43233914/article/details/107958445

    1.环境

    "react": "^16.13.1",

    "react-router-dom": "^5.2.0",

    2.在入口文件添加以下代码

    import { withRouter } from "react-router-dom";
    
    componentDidUpdate() {
        console.log("===",window.location.pathname);
    }
    
    export default withRouter(App);

     

    展开全文
  • 路由变化监听 popstate 事件来操作DOM 需要后端配合,进行重定向 对 SEO 相对友好 原理 vue-router 源码解读 以 Vue 的路由vue-router为例,我们一起来撸一把它的源码。 Tips:因为,本篇的重点在于讲解单页面路由...

    茫茫人海中与你相遇

    b9f69c0c489afb83769e1065b079c4e0.png

    相信未来的你不会很差

    作者:百度小程序技术

    来源:https://segmentfault.com/a/1190000023509417

    单页面应用特征

    假设: 在一个 web 页面中,有1个按钮,点击可跳转到站内其他页面。 多页面应用: 点击按钮,会从新加载一个html资源,刷新整个页面; 单页面应用: 点击按钮,没有新的html请求,只发生局部刷新,能营造出一种接近原生的体验,如丝般顺滑。 SPA 单页面应用为什么可以几乎无刷新呢?因为它的SP—— single-page 。在第一次进入应用时,即返回了唯一的 html 页面和它的公共静态资源,后续的所谓“跳转”,都不再从服务端拿 html 文件,只是 DOM 的替换操作,是模(jia)拟(zhuang)的。 那么js又是怎么捕捉到组件切换的时机,并且无刷新变更浏览器url呢?靠 hashHTML5History

    hash 路由

    特征

    1. 类似www.xiaoming.html#bar 就是哈希路由,当 # 后面的哈希值发生变化时,不会向服务器请求数据,可以通过 hashchange 事件来监听到 URL 的变化,从而进行DOM操作来模拟页面跳转
    2. 不需要服务端配合
    3. 对 SEO 不友好

    原理

    537ccdfc151cf75db90afef9f0fcedcd.png

    HTML5History 路由

    特征

    1. History 模式是 HTML5 新推出的功能,比之 hash 路由的方式直观,长成类似这个样子www.xiaoming.html/bar ,模拟页面跳转是通过 history.pushState(state, title, url) 来更新浏览器路由,路由变化时监听 popstate 事件来操作DOM
    2. 需要后端配合,进行重定向
    3. 对 SEO 相对友好

    原理

    0090e9fa970218abbdfd41587b0c62c4.png

    vue-router 源码解读

    Vue 的路由vue-router为例,我们一起来撸一把它的源码。

    Tips:因为,本篇的重点在于讲解单页面路由的两种模式,所以,下面只列举了一些关键代码,主要讲解:

    1. 注册插件

    2. VueRouter的构造函数,区分路由模式

    3. 全局注册组件

    4. hash / HTML5History模式的 push 和监听方法

    5. transitionTo 方法

    注册插件

    首先,作为一个插件,要有暴露一个 install 方法的自觉,给 Vue 爸爸去 use

    源码的install.js文件中,定义了注册安装插件的方法install,给每个组件的钩子函数混入方法,并在beforeCreate钩子执行时初始化路由:

    Vue.mixin({  beforeCreate () {    if (isDef(this.$options.router)) {      this._routerRoot = this      this._router = this.$options.router      this._router.init(this)      Vue.util.defineReactive(this, '_route', this._router.history.current)    } else {      this._routerRoot = (this.$parent && this.$parent._routerRoot) || this    }    registerInstance(this, this)  },  // 全文中以...来表示省略的方法  ...});

    区分mode

    然后,我们从 index.js 找到整个插件的基类 VueRouter ,不难看出,它是在 constructor 中,根据不同 mode 采用不同路由实例的。
    ...import {install} from './install';import {HashHistory} from './history/hash';import {HTML5History} from './history/html5';...export default class VueRouter {  static install: () => void;  constructor (options: RouterOptions = {}) {    if (this.fallback) {      mode = 'hash'    }    if (!inBrowser) {      mode = 'abstract'    }    this.mode = mode    switch (mode) {      case 'history':        this.history = new HTML5History(this, options.base)        break      case 'hash':        this.history = new HashHistory(this, options.base, this.fallback)        break     case 'abstract':        this.history = new AbstractHistory(this, options.base)        break     default:      if (process.env.NODE_ENV !== 'production') {        assert(false, `invalid mode: ${mode}`)      }    }  }}

    全局注册router-link组件

    这个时候,我们也许会问:使用 vue-router 时, 常见的 又是在哪里引入的呢? 回到 install.js 文件,它引入并全局注册了 router-view、router-link组件:
    import View from './components/view';import Link from './components/link';...Vue.component('RouterView', View);Vue.component('RouterLink', Link);
    ./components/link.js 中, 组件上默认绑定了 click 事件,点击触发 handler 方法进行相应的路由操作。
    const handler = e => {  if (guardEvent(e)) {    if (this.replace) {      router.replace(location, noop)    } else {      router.push(location, noop)    } }};
    就像最开始提到的, VueRouter 构造函数中对不同 mode 初始化了不同模式的 History 实例,因而 router.replace、router.push 的方式也不尽相同。接下来,我们分别扒拉下这两个模式的源码。

    hash模式

    history/hash.js 文件中,定义了 HashHistory 类,这货继承自 history/base.js 的 History 基类。 它的 prototype 上定义了 push 方法:在支持 HTML5History 模式的浏览器环境中( supportsPushState 为 true),调用 history.pushState 来改变浏览器地址;其他浏览器环境中,则会直接用 location.hash = path 来替换成新的 hash 地址。 其实最开始读到这里是有些疑问的,既然已经是 hash 模式为何还要判断 supportsPushState ?是为了支持 scrollBehaviorhistory.pushState 可以传参key过去,这样每个url历史都有一个key,用 key 保存了每个路由的位置信息。 同时,原型上绑定的 setupListeners 方法,负责监听 hash 变更的时机:在支持 HTML5History 模式的浏览器环境中,监听 popstate 事件;而其他浏览器中,则监听 hashchange 。监听到变化后,触发 handleRoutingEvent 方法,调用父类的 transitionTo 跳转逻辑,进行 DOM 的替换操作。
    import { pushState, replaceState, supportsPushState } from '../util/push-state'...export class HashHistory extends History {  setupListeners () {    ...    const handleRoutingEvent = () => {        const current = this.current        if (!ensureSlash()) {          return        }        // transitionTo调用的父类History下的跳转方法,跳转后路径会进行hash化        this.transitionTo(getHash(), route => {          if (supportsScroll) {            handleScroll(this.router, route, current, true)          }          if (!supportsPushState) {            replaceHash(route.fullPath)          }        })      }      const eventType = supportsPushState ? 'popstate' : 'hashchange'      window.addEventListener(        eventType,        handleRoutingEvent      )      this.listeners.push(() => {        window.removeEventListener(eventType, handleRoutingEvent)      })  }  push (location: RawLocation, onComplete?: Function, onAbort?: Function) {    const { current: fromRoute } = this    this.transitionTo(      location,      route => {        pushHash(route.fullPath)        handleScroll(this.router, route, fromRoute, false)        onComplete && onComplete(route)      },      onAbort    )  }}...// 处理传入path成hash形式的URLfunction getUrl (path) {  const href = window.location.href  const i = href.indexOf('#')  const base = i >= 0 ? href.slice(0, i) : href  return `${base}#${path}`}...// 替换hashfunction pushHash (path) {  if (supportsPushState) {    pushState(getUrl(path))  } else {    window.location.hash = path  }}// util/push-state.js文件中的方法export const supportsPushState =  inBrowser &&  (function () {    const ua = window.navigator.userAgent    if (      (ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) &&      ua.indexOf('Mobile Safari') !== -1 &&      ua.indexOf('Chrome') === -1 &&      ua.indexOf('Windows Phone') === -1    ) {      return false    }    return window.history && typeof window.history.pushState === 'function'  })()

    HTML5History模式

    类似的, HTML5History 类定义在 history/html5.js 中。 定义 push 原型方法,调用 history.pusheState 修改浏览器的路径。 与此同时,原型 setupListeners 方法对 popstate 进行了事件监听,适时做 DOM 替换。
    import {pushState, replaceState, supportsPushState} from '../util/push-state';...export class HTML5History extends History {  setupListeners () {    const handleRoutingEvent = () => {    const current = this.current;    const location = getLocation(this.base);    if (this.current === START && location === this._startLocation) {      return    }    this.transitionTo(location, route => {      if (supportsScroll) {        handleScroll(router, route, current, true)      }    })    }    window.addEventListener('popstate', handleRoutingEvent)    this.listeners.push(() => {      window.removeEventListener('popstate', handleRoutingEvent)    })  }  push (location: RawLocation, onComplete?: Function, onAbort?: Function) {    const { current: fromRoute } = this    this.transitionTo(location, route => {      pushState(cleanPath(this.base + route.fullPath))      handleScroll(this.router, route, fromRoute, false)      onComplete && onComplete(route)    }, onAbort)  }}...// util/push-state.js文件中的方法export function pushState (url?: string, replace?: boolean) {  saveScrollPosition()  const history = window.history  try {    if (replace) {      const stateCopy = extend({}, history.state)      stateCopy.key = getStateKey()      history.replaceState(stateCopy, '', url)    } else {      history.pushState({ key: setStateKey(genStateKey()) }, '', url)    }  } catch (e) {    window.location[replace ? 'replace' : 'assign'](url)  }}

    transitionTo 处理路由变更逻辑

    上面提到的两种路由模式,都在监听时触发了 this.transitionTo ,这到底是个啥呢?它其实是定义在 history/base.js 基类上的原型方法,用来处理路由的变更逻辑。
    先通过 const route = this.router.match(location, this.current) 对传入的值与当前值进行对比,返回相应的路由对象;接着判断新路由是否与当前路由相同,相同的话直接返回;不相同,则在 this.confirmTransition 中执行回调更新路由对象,并对视图相关DOM进行替换操作。
    export class History { ... transitionTo (    location: RawLocation,    onComplete?: Function,    onAbort?: Function  ) {    const route = this.router.match(location, this.current)    this.confirmTransition(      route,      () => {        const prev = this.current        this.updateRoute(route)        onComplete && onComplete(route)        this.ensureURL()        this.router.afterHooks.forEach(hook => {          hook && hook(route, prev)        })        if (!this.ready) {          this.ready = true          this.readyCbs.forEach(cb => {            cb(route)          })        }      },      err => {        if (onAbort) {          onAbort(err)        }        if (err && !this.ready) {          this.ready = true          // https://github.com/vuejs/vue-router/issues/3225          if (!isRouterError(err, NavigationFailureType.redirected)) {            this.readyErrorCbs.forEach(cb => {              cb(err)            })          } else {            this.readyCbs.forEach(cb => {              cb(route)            })          }        }      }    )  }  ...}

    108cea8d620f150e094691a9c32b1b02.png

    我们在虚拟的空间与你相遇,期待可以碰撞出不一样的火花

    ce1ee898d9c5989da94129fe053a67e4.png 9bb88ae730803e328f56521266cc4ec4.png公众号ID:前端大联盟扫码关注最新动态
    展开全文
  • 上代码 ... //react监听路由使用组件WithRouter,该组件需要被BrowserRouter包裹。 <BrowserRouter> <App/> </BrowserRouter>, document.getElementById('root') ); App.js

    上代码

    index.js

    //导入BrowserRouter
    import { BrowserRouter } from 'react-router-dom'
    
    ReactDOM.render(
    	//react中监听路由使用组件WithRouter,该组件需要被BrowserRouter包裹。
    	<BrowserRouter>
    		<App/>
    	</BrowserRouter>,
    	document.getElementById('root')
    );
    

    App.js

    //导入WithRouter
    import { withRouter } from 'react-router-dom'
    

    class中

    constructor(props) {
    	super();
    }
    
    //浏览器刷新触发
    componentDidMount() {
    	console.log("浏览器刷新触发->url:"+window.location.href);
    	//将url传出去
    	window.parent.postMessage(JSON.stringify({pagename:window.location.href}), "*");
    }
    
    //路由改变触发
    UNSAFE_componentWillReceiveProps(nextProps) {
    	// 判断跳转路由不等于当前路由
    	if (nextProps.location.pathname !== this.props.location.pathname) {
    		console.log("路由改变触发->url:"+window.location.href);
    		//将url传出去
    		window.parent.postMessage(JSON.stringify({pagename:window.location.href}), "*");
    	}
    }
    
    UNSAFE_componentWillReceiveProps

    路由改变时触发

    componentDidMount

    浏览器刷新时触发

    使用window.parent.postMessage方法可将url传出
    关于iframe内向父级页面传递数据和父级页面接收数据的具体方法可参考以下博客
    点我跳转到参考博客

    Vue与Angular全局监听路由变化参考以下博客
    Vue与Angular全局监听路由变化

    展开全文
  • React监听路由参数

    2020-09-19 00:31:11
    // 路由变化 }) componentWillUpdare(nextProps) { if(this.props.location !== nextProps.location) { // 路由变化 } } componentDidMount () { this.props.history.listern(() => { /...
  • 监听路由需要用到另一个高阶组件 WithRouter ,而这个高阶组件需要被 HashRouter 包裹,否则会报错 Uncaught Error: Invariant failed: You should not use <withRouter(App) /> outside a ,所以将 ...
  • 场景 使用触摸板 对浏览器进行前进后退,导致页面的路由Menu没有发生变化 解决办法:通过对路由添加监听事件,手动触发onClick 事件 componentDidMount() { // 给当前路由加入监听事件 this.props.history....
  • react如何监听路由url变化

    万次阅读 2018-08-24 18:03:00
    "... "...使用这些生命周期钩子可以监听路由相同,参数不同的变化,但是监听不到完全不相同的url的变化。即使路由不同,componentDidMount组件内容所更新的东西变了,但是代码变了,页面没...
  • 那我们所需要做的只是: 当路由改变时,根据路由,也去请求一下数据就OK了,于是乎: class NewsList extends Component { componentDidMount () { this.fetchData(this.props.location); } fetchData...
  • React Hook 实现监听路由切换实时同步渲染页面功能 使用 useLocation 获取当前路由地址
  • react 来做了很多小项目 一直都没结合router来使用更别说redux ,今天就尝试了下使用react的全家桶,试着装环境下包什么的太麻烦了 ,然后就了解了 umi 这个框架, 只能说太nb了 然后就跟着文档撸了起来 . 约定大于...
  • 我们可以通过监听路由变化来实现。但是在react下,怎么实现呢? 下面讨论实现过程: 手动实现 react-router-watcher实现 手动实现 使用Hook方式实现: import { useEffect, useState, useRef, useCallback, ...
  • 结构图一、前言在上一篇 vue-router总结 -- 基础使用 中,简单介绍了vue-router的安装、引用、嵌套路由路由传参和重定向等内容,这是系列的第二篇,主要总结一下路由钩子函数的使用方法和一些常见的使用场景。...
  • 比如我要监听首页/home/index的变化,我们就在home组件的componentDidUpdate中判断路由跳转前后path是否一样来做对应的操作,因为react的路由组件的路由信息是通过props传递到组件内部的,所以路由变化了props里的路由...
  • react监听路由信息

    2020-11-02 21:01:48
    // 在该构造函数中可以监听路由变化,prevProps可以拿到上次的路由信息与当前路由信息进行对比,进行某些操作 componentDidUpdate(prevProps) { if(prevProps.location.pathname !== this.props.location.pathname...
  • React.FC函数组件内怎么监听路由变化

    千次阅读 2020-12-11 18:09:54
    import React, { useEffect } from 'react'; import { useHistory } from 'react-router-dom'; // 自定义的函数式组件 const MyComponent: React.FC = () => { // 拿到history const history = useHistory();...
  • react路由监听

    千次阅读 2019-09-03 23:20:46
    react中,所有的路由组件props身上都会有三个属性,而这三个属性记录了路径的变化情况,路径变化,属性就会变化,属性变化,就会触发componentWillReciveProps这个钩子,我们可以利用这个钩子做一些处理,而要监听...
  • 大概有两种说法:从路由的用途上来解释路由就是指随着浏览器地址栏的变化,展示给用户的页面也不相同。从路由的实现原理上来解释路由就是URL到函数的映射。vue-router是什么Vue Router 是 Vue.js 官方的路...
  • vue监听路由变化的几种方式【Vue】

    千次阅读 2020-07-27 16:33:28
    vue页面开发中,我们经常需要根据路由的变化去实现一些操作,那么如何监听路由变化呢?当然是利用vue中的 watch ,请看代码。 一、监听路由从哪儿来到哪儿去 在这里插入代码片
  • React 监听网页url的路径变化代码:主要步骤: 代码: // 路由 import React, { useState } from "react"; import ReactDOM from "react-dom"; import { Layout, Menu, ConfigProvider, Popconfirm, Popover, ...
  • 一个React路由库,但不仅仅是路由器。 React-Router是一个很棒的产品,我们从中学到了很多。 但是我们确实面对了React-Router在实际使用中无法解决的许多问题,尤其是在移动APP中。 为了让React-Keeper适合移动...
  • react-router v4 路由跳转 react-router v4 路由传参 使用 withRouter withRouter高阶组件,提供了history让你使用~ import React from "react"; import {withRouter} from "react-router-dom"...
  • react中,要将react组件连接到redux中,通常会这样包装组件 class Home extends Component { } function select(state) { return { logBox:state.logBox } } export default connect(select)...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,011
精华内容 3,604
关键字:

react监听路由变化