conditional rendering react router dom

Question

I am making an advertising website with reusable components that load with different graphics depending on what page it is. I am using react-router-dom Route exact path. I imagine i need to be able to read the state of that with my useEffect,[]. So how do i pass down the state so its able to be read by the component.

Please note that the component Hero appears in the functions for Home, Consultants and Solutions


const Hero = props => {
 useEffect(() => {
  console.log(props);
 }, []);
 return (
  <Fragment>
   <div className='grid-hero'>
    <Fragment>
     <div className='overlay'>
      <div>
       <p className='bg-dark'></p>
       <img src={{ homeimg } || { consimg } || { solsimg }} alt='' />
      </div>
     </div>
    </Fragment>

  <Router>
   <Fragment>
    <Navbar />

    <Switch>
     <Route exact path='/' component={Home} />
     <Route exact path='/consultants' component={Consultants} />
     <Route exact path='/solutions' component={Solutions} />
     <Route exact path='/contactus' component={ContactUs} />"
    </Switch>
   </Fragment>
  </Router>

    <div
    className={
     {pathname === "/" && ("grid-home")}
     {pathname === "/consultants" && ("grid-consultants")}
     {pathname === "/solutions" && ("grid-solutions")}
    }>

i need to i guess drill it in i think from the app level is what im asking for help with do i need to bring in useContext is that what you are saying? — Mickey Gray
What is "app level". Its unclear what the specific problem is. Are you unsure of how to pass props to a Route component? — Brian Thompson
i just need to be able to look and see that okay when im on /solutions okay heres the piece of react router being passed in that says its loaded /solutions. i dont think i have to do it with context so basically yes id like to pass the route property into the Hero state on mount — Mickey Gray
Where does Hero fit in to this? Is that supposed to be Home? — Brian Thompson

dixitk13 dixitk13 · Accepted Answer · 2020-03-09T15:47:41

maybe this is what you're looking for:

I've added Hero as top-level image component where your image would switch. I don't have the images, so I used strings, but if you import images like JSX, you'll be able to use this code by removing the img strings inside my Hero dummy component.

adding reference image import syntax for help:

import img from './img.png';

complete example:

import React, { Fragment } from "react";
import {
  BrowserRouter as Router,
  Route,
  Link,
  useLocation
} from "react-router-dom";

function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/contactus">ContactUs</Link>
          </li>
          <li>
            <Link to="/solutions">Solutions</Link>
          </li>
        </ul>

        <hr />
        <Hero />
        <Route exact path="/" component={Home} />
        <Route path="/contactus" component={ContactUs} />
        <Route path="/solutions" component={Solutions} />
      </div>
    </Router>
  );
}

const Hero = () => {
  const homeimg = "HOME_IMAGE";
  const consimg = "CONTACT_US_IMAGE";
  const solsimg = "SOLUTIONS_IMAGE";
  let img = null;

  const location = useLocation();
  if (location.pathname === "/") img = homeimg;
  else if (location.pathname === "/contactus") img = consimg;
  else if (location.pathname === "/solutions") img = solsimg;

  return (
    <Fragment>
      <h3>{location.pathname}</h3>
      <div className="grid-hero">
        <Fragment>
          <div className="overlay">
            <div>
              <p className="bg-dark" />
              {img}
            </div>
          </div>
        </Fragment>
      </div>
    </Fragment>
  );
};

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function ContactUs() {
  return (
    <div>
      <h2>ContactUs</h2>
    </div>
  );
}

function Solutions() {
  return (
    <div>
      <h2>Solutions</h2>
    </div>
  );
}

export default BasicExample;

codepen-link

conditional rendering react router dom

1 Answers