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

Question

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

${currentPath} 是下面代码段中的 /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 spectrum chat 中寻找这方面的帮助。

感谢任何帮助。谢谢!

Answer 1

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

只需创建以下文件夹结构

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

每条路线例如/user/account 将由相应的 js 文件呈现，例如用户/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>;
};

我可能遗漏了您想要准确实现的内容，但希望这对您有所帮助:)