react-router@5route`onEnter`方法未调用，scrolltoview不工作

Question

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

<Link to="/products/shoe#product9">Go to projects and focus id 9</Link>我想给他看看这个产品。(你好页面(为此我这样做：

import React from "react";
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页面，从中单击链接转到产品页面。

实时演示

Answer 1

onEnter不再在反应路由器中工作

你能做的就是把道具传给组件

<Shoes onEnter={hashScroll} />

在CCD_ 6组件内部在componentDidMount上执行它。

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

演示