Go to a different page section using MUI 5

Question

Go to a different page section using MUI 5

I am currently working on a React application and I want to implement a functionality where pressing a button on my Nav Bar will navigate to a specific section on the first page. To achieve this, I have created an onClick function for my button:

const onNavClick = (e, id) => {
  let element = document.getElementById(id);
  e.preventDefault();
  element.scrollIntoView();
};

...

<Button
  onClick={(e) => onNavClick(e, "products")}
  ...
>
  Shop
</Button>

I have also assigned an id to the element that I wish to navigate to.

While everything works as expected on the main page where the element is present in the DOM, I encounter an issue when trying to access it from another page using the Nav button. The error message I receive is:

Cannot read properties of null (reading 'scrollIntoView')

Is there a way for me to access that element from other pages and navigate to that specific section on my first page?

javascript html css reactjs material-ui

Answer 1

Answer №1

If you attempt to scroll to an element that is not present on the page, it will not work. For more information, refer to the documentation.

The Element interface's scrollIntoView() function scrolls the containing parent of the element so that the element itself becomes visible to the user.

When it comes to navigating between pages, there are several options available.

You can utilize a Link component from MUI:

<Link href='#'>Link to another location</Link>

If you are working with Next.js, you have access to their in-built router:

import { useRouter } from 'next/router'
const router = useRouter()
router.push('/homepage')

An alternative commonly used router is react-router:

import { useNavigate } from "react-router-dom"
let navigate = useNavigate()
navigate('/homepage')

If your intention is to navigate to a specific page and then scroll to an element within that page, you can achieve this by passing relevant data and handling it accordingly in the destination page.

Example utilizing Next.js:

Include data as a query parameter:

import { useRouter } from 'next/router'
const router = useRouter()

// Provide some form of reference to the element you wish to scroll to
router.push({
    pathname: '/homepage',
    query: { scrollTo: element }
})

In the /pages/homepage directory, examine the query parameters and manage them appropriately:

import { useRouter } from 'next/router'
const router = useRouter()
let element
if (router.query?.scrollTo)
{
    element = router.query.scrollTo
    // Perform scrolling to the specified element
}

Answer 2

If you attempt to scroll to an element that is not present on the page, it will not work. For more information, refer to the documentation.

The Element interface's scrollIntoView() function scrolls the containing parent of the element so that the element itself becomes visible to the user.

When it comes to navigating between pages, there are several options available.

You can utilize a Link component from MUI:

<Link href='#'>Link to another location</Link>

If you are working with Next.js, you have access to their in-built router:

import { useRouter } from 'next/router'
const router = useRouter()
router.push('/homepage')

An alternative commonly used router is react-router:

import { useNavigate } from "react-router-dom"
let navigate = useNavigate()
navigate('/homepage')

If your intention is to navigate to a specific page and then scroll to an element within that page, you can achieve this by passing relevant data and handling it accordingly in the destination page.

Example utilizing Next.js:

Include data as a query parameter:

import { useRouter } from 'next/router'
const router = useRouter()

// Provide some form of reference to the element you wish to scroll to
router.push({
    pathname: '/homepage',
    query: { scrollTo: element }
})

In the /pages/homepage directory, examine the query parameters and manage them appropriately:

import { useRouter } from 'next/router'
const router = useRouter()
let element
if (router.query?.scrollTo)
{
    element = router.query.scrollTo
    // Perform scrolling to the specified element
}

Go to a different page section using MUI 5

Answer №1

Similar questions

Console not displaying array output

Submitting information to a server

Ways to switch the visibility of a specific thumbnail

Move files in Node.js without removing the original source directory

Building New Web Pages with Express in Node.JS

Connecting a specific entry in a data table with a corresponding web address

When executing npm run dev, the Next/image component encounters an error stating that the "width" property is missing and required

How come flex won't let me rearrange an image?

The following stage in the form fails to load

What is the best method to override the CSS transition effect with JavaScript?

Is it possible to make any object reactive within Vuex?

Node.js seems to be having trouble with emitting events and catching them

Ways to retrieve the most recent state in a second useEffect call?

Angular image source load test encountered an error

Which option is better: installing plotly.js or plotly.js-dist using npm?

Unable to create a flawless circle using Canvas

What is the best way to enhance a react-bootstrap component with TypeScript?

Encountering an 'Unknown provider' error while running a unit test with AngularJS and Jasmine

Outside drop shadows in CSS3 creates an interesting visual effect by giving

Dynamic count down using JavaScript or jQuery