React Conditional Rendering 101

Ever wonder how navigation works in React in a way where, if you click a button on a page, that button redirects you to a specific page, and not only that, it also takes you to a specific section of that page?

This is a very important concept to learn in web development. It explains many navigation concepts which people tend to overlook in the day and age of vibe coding.

So let us dive deep into how this actually works. I will be covering several topics along the way, including:

React Router, useLocation, useRef, useEffect, URLSearchParams, scrollIntoView

This will be a very detailed walkthrough with proper code examples to guide you through everything.

Understanding Single Page Navigation in React

React is a single page application framework. That means when you click on links and move between different pages, the browser is not actually loading new HTML files from the server.

Instead, the same page stays loaded, and only the view gets updated dynamically.

For example:

• If your URL is /home, React shows you the <Home /> component
• If your URL becomes /shop, React shows you the <Shop /> component

Nothing new is actually downloaded from the server. React just swaps components based on the URL.

This is done using conditional rendering behind the scenes.

So far, nothing magical.

Now the Real Scenario

Imagine this situation: You are on the home page. You see a button called:

👉 Order Now

When you click that button:

1. You get redirected to the Shop page
2. The page automatically scrolls down to a specific section
3. Maybe a bulk order form becomes visible

How does all of this happen automatically?

That is exactly what we are going to understand now.

The Link Component

In React Router, we normally use the <Link> component to navigate between pages.

This Link component is responsible for changing the URL.

If your base URL is:

https://www.somewebsite.com

After clicking the button, the URL becomes:

https://www.somewebsite.com/shop?scrollIntoView=true

So far, we have only changed the URL. Nothing else.

React Router Detects URL Change

Now comes the important part. Think of React Router like a CCTV camera watching the URL 24/7. The moment the URL changes, React Router immediately detects it and says:

Hey, the URL changed. Let me update the UI accordingly.

That is literally what React Router does. It conditionally renders components based on the URL.

When the URL is:

/shop

React Router automatically renders the <Shop /> component.

useLocation Hook

Now the question is, What happens to this part?

?scrollIntoView=true

That is where useLocation() comes in.

Get Sanshray’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Inside the Shop component, we can do this:

What useLocation Returns

https://myapp.com/shop?scrollIntoView=true#section1

Then useLocation() returns an object like:

Extracting Query Parameters

Right now, location.search gives us:

“?scrollIntoView=true”

But we need to extract the value properly.

URLSearchParams is a built-in JavaScript tool that helps read query parameters from a URL. Instead of manually handling a string like “?scrollIntoView=true”, you can write new URLSearchParams(location.search) and convert it into an object with useful methods. Then calling params.get(“scrollIntoView”) directly gives you the value “true”, making URL queries easy to work with.

Its like, the searchParams now is a instance of the class, and therby is a object. Which tells us that by object prototyping, i would get all important methods like get() etc. So, now my searchParams has a get method by object prototyping and plus, it has the key value pair created by the URLSearchParams constructor, thereby now, by usibg .get() method i can call the scrollIntoView key!

Now:

• shouldScroll will be “true”

This is very powerful.

useRef to Target a Section

Now we need to scroll to a specific part of the Shop page. For that we use useRef. useRef is basically a pointer to a DOM element.

useRef is simply a pointer in React. When you write const ref = useRef(), React gives you an object like { current: null }. At first it points to nothing. When you attach it to an element using <div ref={ref}>, React automatically updates it so that ref.current now points to that actual DOM element. After that, you can use it to scroll, focus, or interact with that element directly.

Right now:

formRef is pointing to that specific div.

Now comes the final logic.

We need to scroll only if:

• The URL contains scrollIntoView=true

And we need to do it after the component has fully rendered.

That is exactly what useEffect is for.

This is important. If we try to scroll before the DOM is fully painted, the element might not exist yet. So we wait a little using setTimeout to make sure everything is rendered before scrolling.

Let us summarize the entire process:

1. User clicks the Link
2. URL changes to /shop?scrollIntoView=true
3. React Router loads the Shop component
4. useLocation reads the new URL
5. URLSearchParams extracts query values
6. useRef points to the target section
7. useEffect runs after render
8. scrollIntoView moves the page automatically

And that is the complete magic.

CAUTIONS

• Always make sure the DOM is ready before scrolling
• Do not run scroll logic before the component mounts
• Use smooth scrolling for better user experience
• Always validate query parameters before using them

And there you have it.

You now fully understand how conditional navigation and scroll into view works in React.

If you want more advanced examples and real project use cases, comment down and I will cover them in the next article.

Writer

Sanshray Langeh, Founder of TechLift