How to render a particular component on only Home component in ReactJs?

Question

I have a React Project!

Project contains 4 components

Home, About, Login, Alert

So Alert.js will show on every page. I want Alert.js will show only on the Home component. Not on any other component. How can I do that? There are other similar questions. I have tried all. I didn't get any results.

This is my App.js

import React, { Component } from 'react'
import Nav from './COMPONENT/navbar/Nav'
import { Route } from 'react-router';
import Home from './COMPONENT/navbar/Home';
import Login from './COMPONENT/navbar/Login';
import About from './COMPONENT/navbar/About';
import Alert from './COMPONENT/navbar/Alert';

export class App extends Component {
  render() {
    return (
      <>
        <Alert/>
        <Nav />
  
            <Route exact path="/">
              <Home />
            </Route>

            <Route exact path="/about">
              <About />
            </Route>

            <Route exact path="/login">
              <Login />
            </Route>
      </>
    )
  }
}

export default App

score 0 · Answer 1 · answered Aug 27 '21 at 19:20

0

Try this

    return (
      <>
        <Nav />
  
            <Route exact path="/">
              <Alert/>
              <Home />
            </Route>

            <Route exact path="/about">
              <About />
            </Route>

            <Route exact path="/login">
              <Login />
            </Route>
      </>
    )
  }```

answered Aug 27 '21 at 19:20

user8762878

13
2

but I want alert above the navbar..this will bring below the navbar!!1 – Aug 27 '21 at 19:26
Check this link : https://stackoverflow.com/questions/50777333/react-hide-a-component-on-a-specific-route – user8762878 Aug 27 '21 at 19:32

score 0 · Accepted Answer · answered Aug 29 '21 at 11:45

You can use the useLocation hook from react-router and conditionally render the alert.

import {use-location} from react-router

const {pathname} = useLocation();

  <>
    {pathname === "/" && <Alert/>}
    <Nav />

        <Route exact path="/">
          <Home />
        </Route>

        <Route exact path="/about">
          <About />
        </Route>

        <Route exact path="/login">
          <Login />
        </Route>
  </>
)

} }

score 0 · Answer 3 · answered Aug 29 '21 at 13:43

You can use window.location.pathname to check current location. Check pathname equals to '/'

Your Alert.js should like this.

const Alert = () => {
  const location = window.location.pathname;
  if (location === '/') return <div>Alert</div>;
  else return <div />;
};

How to render a particular component on only Home component in ReactJs?

3 Answers3