zoukankan      html  css  js  c++  java
  • react如何在切换路由的时候,页面在最顶部

    vue有相关配置,但是因为用户需要,reactRouter在之前的版本中舍弃了其配置,需要用户自定义设置

    方法:

    创建一个组件,判断切换后的页面是否是最顶端

    ···

    import React from 'react';
    import {
    Route,
    withRouter,
    } from "react-router-dom";
    class ScrollToTop extends React.Component {
    componentDidUpdate(prevProps, prevState, snapshot) {
    if (this.props.location.pathname !== prevProps.location.pathname) {
    window.scrollTo(0, 0)
    }
    }
    render() {
    return this.props.children
    }
    }
    export default ScrollToTop;

    ```
    然后在app中引入该组件

    ```
    return (
    <Router>
    <Switch>
    <ScrollToTop>
    <Route path='/' exact
    render={token ? () => LayEditRouter : () => <Redirect to='/login' push/>}
    />
    <Route path='/login' component={Login}/>
    <Route path='/' render={props => LayEditRouter}/>
    </ScrollToTop>
    </Switch>
    </Router>
    );





    未闻花名
  • 相关阅读:
    10A:子串计算
    09I:鸡蛋的硬度
    09H:数字组合
    09G:登山
    09F:股票买卖
    09E-计算字符串距离
    09D-最大上升子序列和
    09C-全排列
    02C-垃圾炸弹
    【c#基础】vs2019设置高级选项
  • 原文地址:https://www.cnblogs.com/duokexiao/p/12676380.html
Copyright © 2011-2022 走看看