如何在Nextjs 13+ SSR和客户端组件中使用位置？

4ioopgfo 于 2022-11-29 发布在其他

关注(0)|答案(1)|浏览(195)

我试图简单地在标题导航中显示一个活动链接。在next〈13中，我使用了useRoute()。然而，useRoute（）在13+中不起作用。另一个问题是，如果你使用SSR，useRoute不会被挂载。
因此，我的解决方法是确保全局布局是客户端组件。全局布局：

'use client';

import * as React from 'react';
import {Footer, Header, Sidebar} from '../components';

import '../styles/globals.css';

export default function RootLayout({children}: {children: React.ReactNode}) {
    return <html>
        <body>
            <div className='wrapper'>
                <Header pathname={window ? window.location.pathname : ''}/>
                <Sidebar/>
                <>
                    {children}
                </>
                <Footer />
            </div>
        </body>
    </html>
}

导航条件：

<nav className={styles.navigation}>
    <ul>
                {URL.map(route => <li key={route.path}>
                    <Link
                        className={route.path === pathname ? styles.highlighted : ''}
                        href={route.path}
                    >
                        {route.name}
                    </Link>
                </li>)}
    </ul>
</nav>

但是它不能正常工作，并且在页面刷新后url才是active。页面或布局中没有任何道具可以给我想要的行为。
我认为这是一件简单的事情，但我很难找到如何做到这一点在客户端和SSR。
先谢谢你了。

next.js

来源：https://stackoverflow.com/questions/74599911/how-to-use-location-in-nextjs-13-ssr-and-clinet-side-components

1条答案

按热度按时间

vlf7wbxs1#

您可以使用只能在客户端使用的usePathname。
此挂接在服务器组件中不可用。它不接受任何参数。
以下是如何在Header组件中删除pathname属性并执行以下操作：

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";

export default function Header() {
  const pathname = usePathname();

  return (
    <nav className="nav">
      {URL.map((route, index) => (
        <Link
          key={index}
          href={route.path}
          className={route.path === pathname ? styles.highlighted : '' }
        >
          {route.name}
        </Link>
      ))}
    </nav>
  );
}

您可以在这里看到一个工作示例

赞(0）回复(0）举报 2022-11-29

我来回答

如何在Nextjs 13+ SSR和客户端组件中使用位置？

1条答案

相关问题

热门标签

最新问答