当单击图像reactjs时，路由到另一个组件和页面

Question

预期：当单击来自一个组件（PhotosList）的图像时，它会路由到具有指定url的另一个页面以查看另一个组件（图像详细信息）

现实：当点击图像时，两个组件呈现在同一页面上，但url不同。

使用“react Router dom”中的导入{BrowserRouter作为路由器、交换机、路由、链接}；

这是返回的功能组件（PhotosList）

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

        <button onClick={loadMore} className="btn-grad">
          {isLoading ? "Loading..." : "Load More"}
        </button>
        <Switch>
          <Route exact path={"/details"} component={ImageDetails}></Route>
        </Switch>
      </div>
    </Router>
  );

应用程序文件是

const App = () => {
  return (
    <div className="App">
      <header>Album</header>
      <PhotosList />
    </div>
  );
};

export default App;

Answer 1

据我所知，您已经呈现了PhotoList组件，然后呈现了一个照片列表，每个照片都有一个链接到/细节。

在同一组件中，您设置了/details路由。

每当您单击重定向到/details的链接时，PhotoList组件将（应该）卸载。卸载此组件后，路由也将卸载，该路由设置应在/details路由上呈现的组件。因此，您使用的是/details，但路由器不知道应该呈现哪个组件，因为以下代码：

<Switch>
  <Route exact path={"/details"} component={ImageDetails}></Route>
</Switch>

不再存在。

为了避免这种情况，不要把Routes放在应用程序的下面。路由应始终靠近顶层（路由器的子孙）。这使得项目更容易管理。我有超过100个路由的项目，我把我的路由分成单独的文件（例如，每个模块都有一个ModuleRoutes.js文件，我在其中为该模块设置路由），然后您可以创建一个Root路由器组件，它呈现这些单独的JS文件（实际上是React组件），并且您在您的内呈现Root路由器

通过创建一个包含每个路由详细信息的对象数组（路由名称、路径、路由组件、要传递给组件的函数/数据、定义为逻辑表达式的访问控制（真/假）（即user.isLoggedIn==true），您可以将其抽象得更高。通过采用这种抽象，您可以最大限度地减少错误的空间，因为当错误和bug以这种形式（对象）出现时，它们更容易被发现，而JSx占用更多的代码行，有混乱的缩进，并且通常不是很干净。

Answer 2

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

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

在应用程序文件中

const App = () => {
  return (
   <Router>
    <div className="App">
      <header>Album</header>
      <PhotosList />
      <Switch>
          <Route exact path={"/photilist"} component={PhotosList}></Route>
          <Route exact path={"/details"} component={ImageDetails}></Route>
        </Switch>
    </div>
   </Router>
  );
};

export default App;