如何从单个路由更改中渲染多个组件？

Question

我习惯使用 React Router，它提供了极大的灵活性，可以在页面的不同位置从单个路由渲染多个组件，而无需重新加载整个页面。我在下面提供了一个示例。我想在未来的项目中使用 Next.js，但我找不到重现这种类似应用程序的路由器功能的方法，因为 Next.js 似乎只提供基于页面的路由，无法控制页面上各个组件的重新呈现响应路线变化。这似乎适用于网页，但不适用于可能需要多次更改以响应单个路由更改的复杂应用程序。

在以下示例中，我在 CRA 中使用 React Router 根据我的链接配置在页面上同时呈现多个组件。根据我目前的理解，这似乎无法使用 Next.js 重现。

https://codesandbox.io/s/react-router-component-routes-rcen4

代码在这里：

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/about/me">About Me</Link>
        </li>
        <li>
          <Link to="/about/you">About You</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/topics" component={Topics} />
      <Route path="/about" component={About} />
      <Route path="/about/me" component={AboutMe} />
      <Route path="/about/you" component={AboutYou} />

    </div>
  </Router>
);

有没有办法有效地实现这一点并仅渲染我需要的组件以响应使用 Next.js 的路由？

Answer 1

NextJS 有自己的路由器next/router 提供 SPA 功能，不同之处在于页面基于文件结构而不是配置组件。

您最好阅读 Next JS 团队整理的 Migrating from React Router 文档。

概念与 react 路由器不同，因为不同路由器的工作方式存在根本差异，但没有什么是下一个路由器不能做到的，而反应路由器可以**。

要使用此功能，请考虑应用程序主页。它包含放置在布局中的 5 个组件。使用 next，您将为每个单独的状态呈现相同的布局作为单个页面。不要使用单独的页面，否则您将始终看到刷新（参见 ** 进行推理）。每个内部组件都将使用下一个路由器挂钩来确定历史状态是什么。 React 只会重新渲染 props 发生变化的组件，就像它对 react-router-dom 所做的那样。

** Next.js 无法在不刷新的情况下更改路由路径。接下来，您需要切换到使用浅路由的查询参数来控制您正在使用的页面的状态。有些人不喜欢这样，更喜欢漂亮的网址，但最终它达到了相同的目标。

Demo to show your code in a next environment

Answer 2

我认为 Next.js 的优点之一是为 SEO 构建的，如果您想在同一路径中重新渲染另一个组件，则需要进行更多调整以使其对 SEO 友好。 Next.js 中有一个名为动态路径的功能

结构文件喜欢

-pages
 -about
  -[slug].js

这是一个 github 示例

https://github.com/vercel/next.js/blob/canary/examples/cms-datocms/pages/posts/%5Bslug%5D.js