условный рендеринг реагирует роутер dom

Question

Я делаю рекламный сайт с повторно используемыми компонентами, которые загружаются с различной графикой в ​​зависимости от того, какая это страница. Я использую React-Router-DOM Точный путь. Я полагаю, что мне нужно иметь возможность прочитать это состояние с помощью моего useEffect, []. Итак, как мне передать состояние, чтобы его мог прочитать компонент.

Обратите внимание, что компонент Hero появляется в функциях 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")}
    }>

Answer 1

возможно, это то, что вы ищете:

Я добавил Hero в качестве компонента изображения верхнего уровня, где ваше изображение будет переключаться. У меня нет изображений, поэтому я использовал строки, но если вы импортируете изображения, такие как JSX, вы сможете использовать этот код, удалив строки img внутри моего фиктивного компонента Hero.

добавление синтаксиса импорта справочного изображения для справки:

import img from './img.png';

полный пример:

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