Javascript 路由器dom的条件呈现

我正在制作一个带有可重用组件的广告网站，根据页面的不同加载不同的图形。我使用的是反应路由器dom路由精确路径。我想我需要能够用我的useEffect，[]来读取它的状态。那么，我如何传递状态，使其能够被组件读取呢

请注意，Home、Consultants和Solutions功能中会出现组件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>

康斯特英雄=道具=>{
useffect（（）=>{
控制台日志（道具）；
}, []);
返回(

"

---

也许这就是你要找的：

我已经添加了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;

import React，{Fragment}来自“React”；
进口{
BrowserRouter作为路由器，
路线,，
链接
使用地点
}从“反应路由器dom”；
函数BasicExample（）{
返回(


家


联系方式


解决



);
}
康斯特英雄=（）=>{
const homeimg=“主页图像”；
const consimg=“联系我们的图片”；
const solsimg=“解决方案\图像”；
设img=null；
const location=useLocation（）；
如果（location.pathname==“/”）img=homeimg；
如果（location.pathname==“/contactus”）img=consismg，则为else；
else如果（location.pathname==“/solutions”）img=solsimg；
返回(
{location.pathname}

{img}
);
};
函数Home（）{
返回(
家
);
}
函数ContactUs（）{
返回(
联系方式
);
}
函数解（）{
返回(
解决
);
}
导出默认基本示例；

---

我在这里看不到任何状态。我想我需要深入了解我想从应用程序级别寻求帮助我需要使用什么上下文是你说的吗？什么是“应用程序级别”"。不清楚具体的问题是什么。你不确定如何将道具传递给

路由
组件吗？我只需要能够看到，当im打开时，好的，解决方案好的，这是正在传递的react路由器的一部分，说明它已加载/解决方案。我不认为我必须根据上下文来做，所以基本上是的，我想传递e将属性路由到Mount上的Hero状态
Hero
在哪里适合这个？它应该是
Home
？我喜欢它…使用Location…我在Google上搜索了几个小时的条件呈现叉钩：Xhi它有帮助，但我遇到了一个问题。我现在需要使用它来动态插入类名字符串values和ive尝试了字符串或变量的每一次迭代，但没有任何效果。请参阅底部的原始帖子以了解我的最新信息code@MickeyGray创建一个与原始问题无关的新问题
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;