React如何根据URL路径为HeroImage组件渲染不同的头图

问题根源 #

你的代码问题出在路由匹配逻辑上。<Switch>组件会从上到下匹配第一个符合规则的路由，你将path="/"的无exact限制的路由放在了最首位，所有路径（包括/about、/userdashboard）都会匹配到这个路由，导致后面的About、用户面板组件永远不会被渲染，自然看不到关于页的头图。

修复方案 #

方案1（推荐）：给根路径路由添加exact属性 #

修改App.js里的Switch部分代码，给首页路由加上exact，确保只有完全匹配根路径时才渲染首页：

<Switch>
  {/* 加exact，只有路径完全等于/时才匹配 */}
  <Route exact path="/">
    <HomePage />
  </Route>
  <Route path="/about">
    <About />
  </Route>
  <Route path="/userdashboard">
    <UserDashboard />
  </Route>
</Switch>

修改完路由后，确认你的About组件里引入HeroImage和图片的逻辑和首页一致即可，示例参考：

import HeroImage from '../HeroImage'
import aboutpage from '../../assets/Aboutpage.jpg'

export const About = () => {
    return (
        <div>
            <HeroImage img={aboutpage} />
        </div>
    )
}

方案2：调整路由排序 #

也可以将根路径路由放到所有路由的最后，<Switch>会优先匹配更精确的路径：

<Switch>
  <Route path="/about">
    <About />
  </Route>
  <Route path="/userdashboard">
    <UserDashboard />
  </Route>
  {/* 放在最后，前面都匹配不到时才走首页 */}
  <Route path="/">
    <HomePage />
  </Route>
</Switch>

可选优化：可以给HeroImage里的img加上alt属性，比如<img src={props.img} alt={props.alt || '头图'} />，提升页面可访问性。

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