使用嵌套组件路径的渲染功能在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频谱聊天中寻求帮助。

任何帮助表示赞赏。 谢谢！

Answer 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>;
};

我可能会错过你想要实现的东西，但希望这有助于:)