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

Posted 2023-02-21

【中文标题】单击图像时路由到另一个组件和页面reactjs

【英文标题】：Route to another component and page when click on an image reactjs

【发布时间】：2021-10-26 11:54:18

【问题描述】：

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

现实：点击图片时会发生什么情况，两个组件都呈现在同一页面上但具有不同的 url。

使用 import BrowserRouter as Router, Switch, Route, Link from "react-router-dom";

这里是功能组件（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;

【问题讨论】：

您是否尝试过使用 NavLink 而不是 Link？链接旨在将用户重定向到您的应用之外。 NavLink 适用于应用内的所有导航。

我刚刚意识到，每当您重定向到“/details”时，当前组件（产生 /details 路由）将被卸载。而是将此路由移动到根路由器内部。不应该这样做。我更喜欢将路由器放在顶层，这就是为什么我永远不会遇到这种错误的原因。我以前听说过路由拆分，但是我没有使用它。不过，我很确定它不是这样做的。

@DimitarDev 我在文档中没有发现 navlink 和 link 之间的区别。我试图将路由器放在根目录，但没有任何变化。

【参考方案1】：

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;

【参考方案2】：

据我所知，您已经渲染了 PhotoList 组件，该组件随后渲染了一张照片列表，每张照片都带有指向 /details 的链接。

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

当您单击重定向到/details 的Link 时，PhotoList 组件将（应该）卸载。一旦这个组件被卸载，Route 也会被卸载，它设置了应该在/details 路由上呈现的组件。所以你在/details 但是路由器不知道应该渲染什么组件，因为下面的代码：

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

不再存在。

为避免这种情况，请不要在应用程序中将Routes 放在这么低的位置。路由应始终靠近顶层（Router 的子/孙）。这使项目更易于管理。我确实有超过 100 条路线的项目，并且我确实将我的路线分成单独的文件（例如，每个模块都有一个 ModuleRoutes.js 文件，我在其中设置该模块的路线），然后您可以创建一个 @987654332 @ 渲染这些单独的 JS 文件（实际上是 React 组件）的组件，您在 <BrowserRouter> / <Router> 内渲染 RootRouter。

您可以通过创建包含每个路由的详细信息（路由名称、路径、路由的组件、要传递给组件的功能/数据、访问控制（true/false）的对象数组来将其抽象得更高） ) 定义为您选择的逻辑表达式 - 即user.isLoggedIn === true)。通过使用这种抽象，您可以最大限度地减少出错的空间，因为错误和错误在这种形式（对象）中时更容易发现，而 JSx 占用更多代码行，缩进凌乱且不是很干净一般。

【讨论】：

非常感谢您的清晰解释！