react-router@5 route `onEnter` method not calling, scrolltoview not working

Question

according to my requirement, when a user click on

<Link to="/products/shoe#product9">Go to projects and focus id 9</Link> I would like to show him the product. (hello page) for that I do this:

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

I attached an onEnter function to call and scroll, so when there is a #hash let it scroll. It's not working at all. Please navigate to Hello page, from you click the link to go to products page.

Live Demo

Does this answer your question? [onEnter not called in React-Router](https://stackoverflow.com/questions/42768620/onenter-not-called-in-react-router) — Dmitry Reutov, Jan 03 '21 at 06:23

score 2 · Accepted Answer · answered Jan 03 '21 at 06:31

onEnter is no longer working in react-router

What you can do is pass a prop to the component

<Shoes onEnter={hashScroll} />

inside the Shoes component execute it on componentDidMount.

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

demo

react-router@5 route `onEnter` method not calling, scrolltoview not working

1 Answers1