ReactJS点击图片路由跳转时两个组件同时渲染该如何解决？

• 路由规则配置层级错误：你将<Router>、列表内容、<Switch>全部写在了PhotosList组件内部，瀑布流容器、加载按钮这些内容没有被任何Route包裹，无论路由如何变化，这部分内容都会随PhotosList组件全局渲染，跳转到/details路径时自然会和ImageDetails组件同时展示。
• 没有做路由级的组件切换：整个应用没有在根层级配置不同路由对应不同的页面组件，无法实现跳转路由时替换整个页面内容的效果。

步骤1：调整App组件的路由配置 #

将Router、Switch和全量路由规则移到App根组件，分别配置根路径和详情路径对应的组件，给根路径路由添加exact属性避免模糊匹配。
修改后的App组件代码如下：

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import PhotosList from './PhotosList';
import ImageDetails from './ImageDetails';

const App = () => {
  return (
    <div className="App">
      <header>Album</header>
      <Router>
        <Switch>
          {/* 根路径匹配图片列表页 */}
          <Route exact path="/" component={PhotosList} />
          {/* 详情路径匹配图片详情页 */}
          <Route exact path="/details" component={ImageDetails} />
        </Switch>
      </Router>
    </div>
  );
};

export default App;

步骤2：清理PhotosList组件的冗余路由代码 #

删除PhotosList内部的<Router>、<Switch>和详情页路由配置，仅保留列表页本身的业务代码，原有<Link>组件无需修改即可正常触发路由跳转。
修改后的PhotosList组件return代码如下：

return (
  <div className="layout">
    <Masonry gutter={"5 px"} columnsCount={3}>
      {photosList.map((photo: any) => (
        <Link to={"/details"} key={photo.id}>
          <img src={photo.download_url} alt={photo.author} />
        </Link>
      ))}
    </Masonry>

    <button onClick={loadMore} className="btn-grad">
      {isLoading ? "Loading..." : "Load More"}
    </button>
  </div>
);

扩展提示：如果需要在详情页获取对应图片的信息，可以将跳转路径修改为/details/${photo.id}，同时把详情路由规则调整为/details/:id，即可在ImageDetails组件中通过路由参数拿到对应图片ID查询详情。

内容的提问来源于stack exchange，提问作者Menna T-Allah Magdy