Next.js 中具有嵌套组件路由渲染功能的等效路由？答案

【问题标题】：Route equivalent in Next.js with render feature for nested component routes?Next.js 中具有嵌套组件路由渲染功能的等效路由？
【发布时间】：2019-04-01 05:08:45
【问题描述】：

我对 Next.js 还很陌生，到目前为止，我对它的体验非常棒。但是，我很困惑如何在 Next.js 中执行以下代码主要是所有这些都是客户端路由并在用户页面中呈现嵌套组件。

${currentPath} 在下面的 sn-p 中是 /user。

    <div>
     <UserNavbar/>
     <SecondaryNavbar/>
      <div>
        <Route path={`${currentPath}/dashboard`} exact
         render={() => <Dashboard {...this.props}/>} />
        <Route path={`${currentPath}/listings`} exact
         render={() => <Listings {...this.props}/>} />
        <Route path={`${currentPath}/listings/new`} exact
         render={() => <AddNewListing {...this.props}/>} />
        <Route path={`${currentPath}/account`} exact
         render={() => <Account {...this.props} /> } />
     </div>
    </div>

可能是我对这个完全偏离了轨道。我也尝试在 Next.js 频谱聊天中寻求帮助。

感谢任何帮助。谢谢！

【问题讨论】：

标签： javascript reactjs react-router next.js

【解决方案1】：

我能想到的解决方案之一是完全为 Next.js 保留路由

只需创建以下文件夹结构

pages/
  user/
    account.js
    dashboard.js
    listings.js
    // etc...
  user.js

每条路线的位置，例如/user/account 将由相应的 js 文件呈现，例如user/account.js

/pages/user.js 文件示例

import Link from 'next/link';

export default () => {
  return (
    <div>
      <h1>User page</h1>
      <ul>
        <li>
          Go to <Link href="/user/account">account</Link>
        </li>
      </ul>
    </div>
  );
}

/pages/user/account.js

export default () => {
  return <div>account</div>;
};

我可能错过了您想要实现的确切内容，但希望这会有所帮助:)

【讨论】：

感谢您分享示例。但是，我的问题更多地与渲染组件而不是页面有关。想象一下，您有一个 user 页面，并且必须在客户端在其中呈现一个选项卡导航器。 Where-in 每个选项卡也应该反映在 URL 中。例如： /user/account ， /user/dashboard 等。我正在寻找的是 Next.js 中 react-router 的渲染等价物现在，我已经通过使用来自 next/link 的 as 属性解决了我的问题和通过在每个选项卡更改时重定向到 user 页面。示例：
@ashish.gd 你是否找到了关于如何根据路径更改渲染组件的答案？
@rugy 不是真的，我继续使用上面提到的as 选项。自从这个项目以来，在 Next 中并没有真正做太多的工作。