Redirecting to a page section using props.history in react-redux

Suppose you want to redirect from your current page to a particular section in a new page. The hash redirection doesn’t work if you just push the hash to the prop’s history. If you are using react-redux, this is how you do it:

I am first writing an about page which contains a button, clicking which will redirect to a particular section on another page called programs page. Both pages have a controller code and a view code. It helps in keeping the business logic and front-view in two different files.

You write the controller function for your current page and write an arrow function for redirection.

The view of your current page is somewhat like this with lot of random content. There is however one button that redirects you to the programs page. Clicking this button will call the redirect function declared in the AboutController

import { useHistory } from "react-router-dom";

import { connect } from 'react-redux';

import AboutView from '/About/AboutView';

function AboutController() {

const redirect = (path) => {

return history.push(path);

}

return (

<AboutView

{...aboutContent}

redirect={redirect} />

);

}

export default connect()(AboutController);

function AboutView(){

return(

<div><div>....</div><div>....</div>

<div>....</div>

.

.

.<button onClick={() => this.props.redirect("/programs#ourResearch")} /><div>....</div><div>....</div>

<div>....</div>

</div>);}

My redirected page has a whole lot of information but I want to land on a particular section of the page when I click the above button. I add an “id” to the div of that section so that I can use the same id as a hash in my props.location:

function ProgramsView(){

return(
<div><div>....</div><div>....</div>
<div>....</div>
.
.
<div id="ourPrograms" className="programs-section3"> <div className="h2 buffer-bottom2"> Our Programs </div> <div className="h11">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div></div><div>....</div><div>....</div>
<div>....</div>
.
.</div>);}

Now comes the cool part. You write the controller for your redirected page. I am passing props to my controller function. I call on useEffect hook once to run a check on whether the redirected link of the page contains any hash. If it does contain a hash then scrollIntoView to that section of the page!

import ProgramsView from '/Programs/ProgramsView';
import { connect } from 'react-redux';

function ProgramsPageController(props) {

useEffect(() => {const view = props.location.hash;

const ourPrograms = document.getElementById('ourPrograms');if (view && view.includes("#")) { ourPrograms.scrollIntoView();}}, []);return (<div><ProgramsView{...programContent}/></div>)}export default connect()(ProgramsController);

Yay! Now you can redirect to any section of your web application using this method without having to import any new libraries! Enjoy coding :)

Still here? You probably have a project.

Bring me a problem

© 2026 Surabhi Shivamath
Built from scratch, naturally.