javascript - 使用 React.js 在网站的页脚上显示不同的 CTA 按钮，具体取决于页面路径

Question

页脚必须显示不同的 CTA，具体取决于用户是在主页上还是在产品页面上。产品页面是一个单独的页面，用于呈现主页上所选项目的产品信息，我实现的方式是使用 useParams()，并在 page.id(来自数据文件) 和页面 ID。
我以为我可以为页脚做同样的事情，但我收到一个错误，声称一切都是未定义的，字面上的，一切。
这是我的页脚组件。如您所见，我正在将数据文件夹中的页脚数据作为“pageItems”导入:

import React from 'react';
import { useParams } from 'react-router';
import pageItems from '../../data/footerData';

function Footer() {
  const { pageID } = useParams();

  const individualPage = pageItems.find(page => page.id === pageID);

  return (
    <div className="footer-container">
      <p>{individualPage.copy}</p>

      <a href="https://www.lego.com/kids" target="_blank">
        <img src={individualPage.cta} alt="cta" />
      </a>
    </div>
  );
}

数据文件(它只是一个 javascript 文件)的结构如下:

const footerData = [
  {
    id: '1',
    copy: 'You can find more fun at',
    cta: HomeCta,
    href: 'https://www.something.com',
  },
];

我确信我可以创建 <Route path="/:videoID"> 之间的相关性(有效)和页脚，但我似乎无法正确理解。
编辑:这是我的路由页面目前的设置方式:

    return (
        <Router>

            <Navbar />

            <Switch>
                <Route path="/:videoID">
                    <FeaturedVideo />
                </Route>
                <Route exact path="/">
                    <Home />
                </Route>
            </Switch>

            <Footer />

        </Router>
    );
}

任何帮助都会真正有帮助。非常感谢你!
作为旁注，我使用的是使用 react hooks 的 react 版本

Answer 1

解决办法是保留<Footer />内<Router> ，但在 <Switch> 之外并将其作为组件分配给 <Route>与许多 path值，而您希望它显示。
这是 codesandbox 上的工作版本

import React from "react";
import "./styles.css";

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams
} from "react-router-dom";

const Footer = (props) => {
  let { videoID } = useParams();
  return <h3>Requested video ID: {videoID}</h3>;
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Router>
        <Link to="/2">VideoID2 </Link>
        <Link to="/3">VideoID3 </Link>
        <Link to="/4">VideoID4 </Link>
        <Switch>
          <Route path="/:videoID">
            <p>You are viewing</p>
          </Route>
          <Route exact path="/"></Route>
        </Switch>
        <Route exact path={["/", "/:videoID"]} component={Footer} />
      </Router>
    </div>
  );
}