Reactjs 路由`onEnter` 方法不调用，scrolltoview 不工作

Question

根据我的要求，当用户点击

<Link to="/products/shoe#product9">Go to projects and focus id 9</Link> 我想向他展示产品。（你好页面）为此我这样做了：

从“反应”导入反应； import { Link, Route, Switch, Redirect } from "react-router-dom";

import "./products.scss";

const Shoes = React.lazy(() => import("./shoes/shoes.component"));
const Cloths = React.lazy(() => import("./cloths/cloths.component"));

function hashScroll() {
  alert("called");
  const { hash } = window.location;
  if (hash !== "") {
    setTimeout(() => {
      const id = hash.replace("#", "");
      const element = document.getElementById(id);
      if (element) element.scrollIntoView();
    }, 0);
  }
}

export default class Products extends React.Component {
  render() {
    return (
      <div>
        <header>
          <Link to="/products/shoe">Shoes</Link>
          <Link to="/products/cloths">Cloths</Link>
        </header>
        <h1>Products page</h1>
        <main>
          <Switch>
            <Redirect exact from="/products" to="/products/shoe" />
            <Route path="/products/shoe" onEnter={hashScroll}>
              <Shoes />
            </Route>
            <Route path="/products/cloths">
              <Cloths />
            </Route>
          </Switch>
        </main>
      </div>
    );
  }
}

我附加了一个 onEnter 函数来调用和滚动。所以当有 #hash 时让它滚动。但它根本不起作用。有人帮帮我吗？请导航到 Hello 页面，从您单击 link 转到产品页面。

Live Demo

Answer 1

onEnter 不再在 react-router 中工作

你可以做的是将 prop 传递给组件

<Shoes onEnter={hashScroll} />

在 Shoes 组件内，在 componentDidMount 上执行它。

componentDidMount = () => {
    if (this.props.onEnter) {
        this.props.onEnter();
    }        
};

demo

Reactjs 路由`onEnter` 方法不调用，scrolltoview 不工作

Reactjs route `onEnter` method not calling, scrolltoview not works

reactjs

react-router-v5