Router

Next.js，在導航時組件狀態未刷新時應該怎麼辦

我遇到了這個問題，基本上我的組件使用了 useState() hook 來設置一些變量，但在使用路由進行導航時，狀態並沒有被更新。事實證明，我的自定義 _app.js 代碼，這段代碼是我從教程中複製過來的，只是用於為應用添加全局樣式，其中存在著這段代碼： export default function App({ Component, pageProps }) { return <Component {...pageProps} /> } 我將其更改為： import { useRouter } from 'next/router' export default function App({ Component, pageProps }) { const router = useRouter() return <Component {...pageProps} key={router.asPath} /> } 這樣做後，它又按預期工作了。我只需將路徑作為 key 添加即可。

nextjs-router

＃如何使用Next.js路由器学习如何使用next/router包来控制Next.js中的路由在使用Link连接两个页面的Next.js上，我们看到了如何使用Link组件在Next.js应用中声明式地处理路由。在JSX中管理路由非常方便，但有时您需要以编程方式触发路由更改。在这种情况下，您可以直接访问Next.js的路由器，它位于next/router包中，并调用其push()方法。下面是访问路由器的示例： import { useRouter } from 'next/router' export default () => { const router = useRouter() //... } 通过调用useRouter()来获取路由器对象之后，我们可以使用它的方法。这是客户端路由器，因此方法应仅在前端代码中使用。最简单的方法是将调用包装在useEffect() React钩子中，或者在React有状态组件中的componendDidMount()内部。您最常使用的是push()和prefetch()。 push()允许我们以编程方式触发URL更改，如前端代码所示： router.push('/login') prefetch()允许我们以编程方式预取URL，在没有自动处理预取的Link标签时非常有用，如下所示： router.prefetch('/login') 完整示例： import { useRouter } from 'next/router' export default () => { const router = useRouter() useEffect(() => { router.prefetch('/login') }) } 您还可以使用路由器来监听路由变更事件。

使用 Next.js Router 偵測當前鏈接

在 Next.js 中如何使用 Router 偵測當前鏈接並給予其一個類別，以便我們可以使用 CSS 來為其設置樣式。當與鏈接一起工作時，一個非常重要的功能就是確定當前 URL，特別是為活動鏈接指定一個類別，以便我們可以將其與其他鏈接區分開來並進行不同的樣式設定。這在網站的標頭中特別有用。 Next.js 預設的 Link 組件（next/link）並不會自動為我們完成這個功能。我們可以使用兩種技術。一種是將邏輯添加到 Link 的子組件中。另一種技術是在另一個我們可以構建的組件中使用 Link 來處理此邏輯。讓我們從最簡單的方法開始： import React from 'react' import Link from 'next/link' import { useRouter } from 'next/router' const menu = [ { title: '首頁', path: '/home' }, { title: '探索', path: '/explore' }, { title: '通知', path: '/notifications' }, ] const Sidebar = () => { const router = useRouter() return ( <div> {menu....

如何以程式方式在 Next.js 中更改路由

在元件中，您可以使用 useRouter 鉤子： import { useRouter } from 'next/router' //... const router = useRouter() router.push('/test') 有時，這是無法做到的，例如當您不在 React 元件中時，可能是在一個實用程式函數中。在這種情況下，您可以這樣做： import Router from 'next/router' Router.push('/test')

如何在Next.js中強制重新加載頁面

在組件中，您可以使用useRouter鉤子： import { useRouter } from 'next/router' //... const router = useRouter() router.reload(window.location.pathname) 有時無法使用此方法，例如在非React組件中，例如在實用函數中。在這種情況下，您可以這樣做： import Router from 'next/router' Router.reload(window.location.pathname)