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>
    );





    未闻花名
  • 相关阅读:
    wc 统计程序
    读C#程序
    VS2013 单元测试
    android开发心得之知识的量变到质变
    大学第一篇博客
    团队作业七
    团队作业六
    团队作业五
    团队作业四
    团队作业三
  • 原文地址:https://www.cnblogs.com/duokexiao/p/12676380.html
Copyright © 2011-2022 走看看