React如何根据当前URL路由动态切换对应页面的背景Banner图

两种常用实现方式，按需选择即可。

方案1：组件传参（推荐，耦合度最低） #

不用让Background组件绑定路由逻辑，每个页面单独引入时传入对应横幅资源即可，后续维护只需要改对应页面的代码，不会互相影响。

1. 改造Background.js，让它接收外部传入的图片地址props：

import React from 'react';
import sherlockBaner from 'assets/SherlockBaner.svg';

const Background = ({ bannerSrc }) => {
  return (
    <div>
      <img className="baner" src={bannerSrc} alt="page banner" />
    </div>
  );
};

// 设置默认值，不传参数时默认显示夏洛克主题横幅
Background.defaultProps = {
  bannerSrc: sherlockBaner
};

export default Background;

2. 在对应页面组件里传入匹配的横幅资源，以Mindhunter页面为例：

import React from 'react';
import Background from 'components/Series/Background/Background';
// 导入Mindhunter主题横幅
import mindhunterBaner from 'assets/MindhunterBaner.svg';

const Mindhunter = () => {
  return (
    <>
      <Background bannerSrc={mindhunterBaner} />
      {/* 页面其余业务内容 */}
    </>
  );
};

export default Mindhunter;

Sherlock页面和第三个主题页面同理，分别传入自己对应的横幅资源即可。

方案2：组件内匹配路由（适合全局挂载场景） #

如果Background组件是挂在全局公共布局里，不是每个页面单独引入的，可以直接在组件内读取当前路由路径，自动匹配对应横幅。
前提是项目已经接入react-router-dom，只需要改造Background.js即可：

import React from 'react';
import { useLocation } from 'react-router-dom';
// 导入所有主题横幅
import sherlockBaner from 'assets/SherlockBaner.svg';
import mindhunterBaner from 'assets/MindhunterBaner.svg';
// 导入第三个主题的横幅 例：import otherBaner from 'assets/OtherBaner.svg';

// 维护路由路径和横幅的映射关系
const bannerPathMap = {
  '/mindhunter': mindhunterBaner,
  '/sherlock': sherlockBaner,
  // 补充第三个页面的路由和横幅对应关系 例：'/other': otherBaner
};

const Background = () => {
  const location = useLocation();
  // 匹配当前路径对应的横幅，匹配不到时默认显示夏洛克横幅
  const currentBanner = bannerPathMap[location.pathname] || sherlockBaner;

  return (
    <div>
      <img className="baner" src={currentBanner} alt="page banner" />
    </div>
  );
};

export default Background;

提示：如果路由存在嵌套、带动态参数（比如/mindhunter/episode/1这类子路径），不要用全等匹配，可以改成前缀匹配逻辑：

const matchPath = Object.keys(bannerPathMap).find(path => location.pathname.startsWith(path));
const currentBanner = bannerPathMap[matchPath] || sherlockBaner;

这样子路径下也能正确显示对应主题的横幅。

内容的提问来源于stack exchange，提问作者user16016420