Two Ways to Get the Home Page URL in React.js

If you want to check if the current path is the root (/) in React, you can do something like this using window.location.pathname

In React.js, you can retrieve the home page URL using different approaches depending on your setup. Here are two methods:

1. Using window.location The window.location.origin property provides the base URL of your site, and window.location.pathname gives the current path.

Example:

const HomePage = () => {  const homeUrl = window.location.origin;  const isHomePage = window.location.pathname === '/';  return (    <div>      <h1>Current URL: {homeUrl}</h1>      <p>{isHomePage ? 'This is the Home Page' : 'This is not the Home Page'}</p>    </div>  );};export default HomePage;

• 2. Using useLocation from React Router If you’re using React Router for navigation, the useLocation hook provides access to the current path.

Example:

import { useLocation } from 'react-router-dom';

const HomePage = () => {
  const location = useLocation();
  const isHomePage = location.pathname === '/';

  return (
    <div>
      <h1>{isHomePage ? 'This is the Home Page' : 'This is not the Home Page'}</h1>
    </div>
  );
};

export default HomePage;

Both methods can be used to check if the current URL corresponds to the home page (/).