渲染后reactjs滚动到顶部不起作用

Question

我对 reactjs 很陌生，我想在路由更改后滚动到页面顶部。我已经尝试了几乎所有的可能性来实现这一点，但没有运气。我已经花了 2 多天的时间，我决定把它贴在这里，因为有数十亿个重复。我正在使用 react: v16.12, redux: v4, react-router-dom: v5.1

我在这些帖子中尝试过任何东西：

Scroll to the top of the page after render in react.js

https://gist.github.com/romanonthego/223d2efe17b72098326c82718f283adb

react-router scroll to top on every transition

这是我的 App.js（我知道它需要稍微重构一下）

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import jwt_decode from "jwt-decode";
import setAuthToken from "utils/setAuthToken";
import {
  setCurrentUser,
  logoutUser,
  getNotifications
} from "actions/authActions";
import { clearCurrentProfile } from "actions/profileActions";

// import { ApolloProvider } from 'react-apollo';
// import { ApolloClient } from 'apollo-client';
// import { HttpLink } from 'apollo-link-http';
// import { InMemoryCache } from 'apollo-cache-inmemory';
import store from "store";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import ScrollIntoView from "../appUtils/ScrollIntoView";


// Check for token
if (localStorage.jwtToken) {
  // Set auth token header auth
  setAuthToken(localStorage.jwtToken);
  // Decode token and get user info and exp
  const decoded = jwt_decode(localStorage.jwtToken);
  // Set user and isAuthenticated
  store.dispatch(setCurrentUser(decoded));
  store.dispatch(getNotifications(decoded.id));
  // Check for expired token
  const currentTime = Date.now() / 1000;
  if (decoded.exp < currentTime) {
    // Logout user
    store.dispatch(logoutUser());
    // Clear current Profile
    store.dispatch(clearCurrentProfile());
    // Redirect to login
    window.location.href = "/login";
  }
}

class App extends Component {
  static propTypes = {
    auth: PropTypes.object.isRequired
  };

  isClient = () => typeof window !== "undefined";

  render() {
    const { auth } = this.props;
    const user = auth && auth.user ? auth.user : null;

    const adminRoutes = () => (
      <div>
        <Switch>
          <PrivateRoute exact path="/admin" component={Admin} />

          <PrivateRoute
            exact
            path="/admin/credential"
            component={UserCredentialList}
          />

          <PrivateRoute
            exact
            path="/admin/user/credential/:id"
            component={UserCredential}
          />

          <PrivateRoute
            exact
            path="/admin/deactivate"
            component={UserDeactivateList}
          />

          <PrivateRoute
            exact
            path="/admin/user/deactivate/:id"
            component={UserDeactivate}
          />
        </Switch>
      </div>
    );

    return (
      <div className={styles["app-wrapper"]}>
        <Router>
          <ScrollIntoView>
          <Navbar />
          <React.Fragment>
            <div className={styles["content-wrapper"]}>
              <Route exact path="/" component={Landing} />
                <Switch>
                  <Route exact path="/register" component={Register} />
                  <Route exact path="/login" component={Login} />
                  <Route exact path="/thank-you" component={ThankYouPage} />
                  <Route exact path="/sign-out" component={SignoutPage} />
                  <Route
                    exact
                    path="/password/recover"
                    component={RecoverPassword}
                  />
                  <Route
                    exact
                    path="/password/reset/:userId/:token"
                    component={UpdatePassword}
                  />
                  <Route
                    exact
                    path="/notifications"
                    component={Notifications}
                  />
                </Switch>

                <Switch>
                  <PrivateRoute
                    exact
                    path="/profiles"
                    component={ProfilesLandingPage}
                  />
                  <PrivateRoute
                    exact
                    path="/specialists"
                    component={SpecialistsPage}
                  />
                  <PrivateRoute
                    exact
                    path="/profile/:handle"
                    component={Profile}
                  />
                  {user && user.isAdmin && adminRoutes()}
                  <PrivateRoute exact path="/dashboard" component={Dashboard} />
                  {/* <Switch>
                <PrivateRoute exact path="/messages" component={Messages} />
              </Switch> */}
                  <PrivateRoute
                    exact
                    path="/create-profile"
                    component={CreateProfile}
                  />
                  <PrivateRoute
                    exact
                    path="/edit-profile"
                    component={EditProfile}
                  />
                  <PrivateRoute
                    exact
                    path="/edit-account"
                    component={EditAccount}
                  />
                  <PrivateRoute
                    exact
                    path="/change-password"
                    component={ChangePassword}
                  />
                  <PrivateRoute
                    exact
                    path="/add-experience"
                    component={AddExperience}
                  />
                  <PrivateRoute
                    exact
                    path="/add-education"
                    component={AddEducation}
                  />
                  {/* <PrivateRoute
                      exact
                      path="/add-payment"
                      component={AddPayment}
                    />
                    <PrivateRoute
                      exact
                      path="/update-payment"
                      component={UpdatePayment}
                    /> */}
                  <PrivateRoute exact path="/public-qa" component={PostsPage} />
                  <PrivateRoute
                    exact
                    path="/post/edit/:id"
                    component={PostEdit}
                  />
                  <PrivateRoute
                    exact
                    path="/ask-question"
                    component={PostForm}
                  />
                  <PrivateRoute
                    exact
                    path="/create-case"
                    component={CreateCase}
                  />
                  <PrivateRoute
                    exact
                    path="/contact-messages"
                    component={ContactMessagesPage}
                  />
                  <PrivateRoute
                    exact
                    path="/contact-messages/:id"
                    component={ContactMessageItem}
                  />
                  {/* <Switch>
                  <PrivateRoute
                    exact
                    path="/cases"
                    component={CaseLandingPage}
                  />
                </Switch> */}
                  <PrivateRoute
                    exact
                    path="/your-cases"
                    component={YourCasesPage}
                  />
                  <PrivateRoute
                    exact
                    path="/case/:id"
                    component={CaseDetails}
                  />
                  <PrivateRoute
                    exact
                    path="/post/:id"
                    component={PostDetails}
                  />
                </Switch>

                <Route exact path="/not-found" component={NotFound} />
                <FooterRoutes />
            </div>
          </React.Fragment>
          <Footer />
          </ScrollIntoView>
        </Router>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    auth: state.auth
  };
}

export default connect(mapStateToProps)(App);

这是我的 ScrollIntoView.js 工具：

import React, { Component } from 'react';
import { withRouter } from 'react-router';

class ScrollIntoView extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0,0);
      console.log('hello world')
    }
  }

  render() {
    return this.props.children
  }
}

export default withRouter(ScrollIntoView)

所以我也尝试过 useEffect()、oaf 包和历史记录，但没有运气。我在 ScrollIntoView 组件中添加了 console.log('hello');，它会在路线更改时触发，但不会向上滚动。我想知道它是否被某种东西覆盖了。任何提示和建议将不胜感激。感谢您的时间和关注。

Answer 1

你检查过有没有窗户？

if (typeof window !== 'undefined') {
  window.scrollTo(0,0);
}