条件渲染反应路由器dom

Question

我正在制作一个带有可重用组件的广告网站，这些组件根据页面的不同加载不同的图形。我正在使用 react-router-dom Route 确切路径。我想我需要能够用我的 useEffect，[] 来读取它的状态。那么我如何传递状态以便组件能够读取它。

请注意组件 Hero 出现在主页、顾问和解决方案的功能中

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 之类的图像，您将能够通过删除我的 Hero 虚拟组件中的 img 字符串来使用此代码。

添加参考图像导入语法以获得帮助：

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