Trying to build a react app, the react routes have '#' in them to navigate to different sections, It is working fine when I navigate them by clicking on navbar, but If I use history.push('/home#aboutus') this is navigating to home but not moving to the aboutus section. If I use history.push({pathname: "/home#home",userData: data}) only the URL is updating, the screen in empty.
PS: have enclosed this component within Router in parent component
Please refer to the below-attached code.
<div>
<div className={style.container}>
<Header />
</div>{" "}
<Switch>
<Route
path="/package"
exact
render={(props) => {
console.log("inside package");
return <Package {...props} />;
}}
/>
<Route
exact
path="/home"
render={(props) => {
console.log("inside home");
return (
<React.Fragment>
<div id="home">
<Home />
</div>
<div id="facility">
<Facility />
</div>
<div id="speciality">
<Special />
</div>
<div id="about">
<About {...props} />
</div>
</React.Fragment>
);
}}
/>
<Route
path="/specialties/:specality"
exact
component={(props) => {
console.log("inside speciality");
return <SpecialDetail {...props} />;
}}
/>
<Route exact path="/">
<Redirect to="/home" />
</Route>
</Switch>
