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

我可能会丢失您要确切实现的功能，但希望对您有所帮助：）

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

1 个答案: