Мы можем получить текущий маршрут в компоненте Next.js с помощью хука useRouter
:
src/pages/index.tsx
import Head from 'next/head'; import { useRouter } from 'next/router'; export default function Home() { const { pathname } = useRouter(); return ( <> <Head> <title>Next.js - Coding Beauty</title> <meta name="description" content="Next.js Tutorials by Coding Beauty" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.ico" /> </Head> <main> Welcome to Coding Beauty 😄 <br /> <br /> Pathname: <b>{pathname}</b> <br /> URL: <b>{currentUrl}</b> </main> </> ); }
Получить текущий маршрут в компоненте маршрутизатора приложения Next.js
Чтобы получить текущий маршрут в компоненте маршрутизатора приложения Next.js, вы можете использовать хук usePathname
из next/navigation
.
src/app/page.tsx
'use client'; import React from 'react'; import { Metadata } from 'next'; import { usePathname } from 'next/navigation'; export const metadata: Metadata = { title: 'Next.js - Coding Beauty', description: 'Next.js Tutorials by Coding Beauty', }; export default function Page() { const pathname = usePathname(); return ( <main> Welcome to Coding Beauty 😄 <br /> <br /> Route: <b>{pathname}</b> </main> ); }
Маршрутизатор приложения Next.js: нам нужно 'use client'
Обратите внимание на оператор 'use client'
вверху.
Это потому, что все компоненты в новом каталоге app
по умолчанию являются серверными компонентами.
Это означает, что мы не можем получить доступ к конкретным API на стороне клиента.
Мы не можем сделать ничего интерактивного с useEffect
или другими хуками.
Если мы попробуем, то получим ошибку.
Потому что это серверная среда.
Получить текущий маршрут в Next.js getServerSideProps
Чтобы получить текущий маршрут в getServerSideProps
, используйте req.url
из аргумента context
.
src/pages/amazing-url.tsx
import { NextPageContext } from 'next'; import Head from 'next/head'; export function getServerSideProps(context: NextPageContext) { const route = context.req!.url; console.log(`The route is: ${route}`); return { props: { route, }, }; } export default function Home({ route }: { route: string }) { return ( <> <Head> <title>Next.js - Coding Beauty</title> <meta name="description" content="Generated by create next app" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.png" /> </Head> <main> Welcome to Coding Beauty 😃 <br /> Route: <b>{route}</b> </main> </> ); }
Получить полный URL-адрес в Next.js getServerSideProps
Чтобы получить текущий URL-адрес в getServerSideProps
страницы Next.js, используйте функцию getUrl
из библиотеки nextjs-current-url
.
src/pages/index.tsx
import { NextPageContext } from 'next'; import Head from 'next/head'; import { getUrl } from 'nextjs-current-url/server'; export function getServerSideProps(context: NextPageContext) { const url = getUrl({ req: context.req }); return { props: { url: url.href, }, }; } export default function Home({ url }: { url: string }) { const urlObj = new URL(url); const { pathname } = urlObj; return ( <> <Head> <title>Next.js - Coding Beauty</title> <meta name="description" content="Generated by create next app" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.png" /> </Head> <main> Welcome to Coding Beauty 😃 <br /> <br /> URL: <b>{url}</b> <br /> Route: <b>{pathname}</b> </main> </> ); }
Получить полный URL-адрес в компоненте Next.js
Чтобы получить текущий URL в компоненте Next.js, вы можете использовать хук useUrl
из библиотеки nextjs-current-url
.
С каталогом pages
:
src/pages/index.tsx
import { useUrl } from 'nextjs-current-url'; import Head from 'next/head'; export default function Home() { const { href: currentUrl, pathname } = useUrl() ?? {}; return ( <> <Head> <title>Next.js - Coding Beauty</title> <meta name="description" content="Next.js Tutorials by Coding Beauty" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.png" /> </Head> <main> Welcome to Coding Beauty 😄 <br /> <br /> Route: <b>{pathname}</b> URL: <b>{currentUrl}</b> <br /> </main> </> ); }
useUrl()
возвращает объект URL
, который дает нам больше информации о текущем URL-адресе.
Вот некоторые из них:
search
: параметры запроса URL. Включает?
hash
: идентификатор фрагмента, часть после#
.href
: полный URL-адрес, включая протокол, имя хоста, номер порта, путь, параметры запроса и идентификатор фрагмента.protocol:
Схема протокола URL, напримерhttps:
илиmailto:
. Не включает//
.hostname
: доменное имя URL без номера порта.pathname
: URL-адрес и имя файла без запроса и идентификатора фрагмента.
src/pages/amazing-url.tsx
import { NextPageContext } from 'next'; import Head from 'next/head'; import { useUrl } from 'nextjs-current-url'; export default function Home() { const { pathname, href, protocol, hostname, search, hash } = useUrl() ?? {}; return ( <> <Head> <title>Next.js - Coding Beauty</title> <meta name="description" content="Generated by create next app" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.png" /> </Head> <main> Welcome to Coding Beauty 😃 <br /> <br /> URL: <b>{href}</b> <br /> Pathname: <b>{pathname}</b> <br /> Protocol: <b>{protocol}</b> <br /> Hostname: <b>{hostname}</b> <br /> Search: <b>{search}</b> <br /> Hash: <b>{hash}</b> </main> </> ); }
Основные выводы
- Вы можете использовать хук
useRouter
в Next.js, чтобы узнать текущий маршрут. Это как ваш навигационный компас! - Для получения текущего маршрута в компоненте маршрутизатора приложения Next.js лучше всего использовать хук
usePathname
изnext/navigation
. Но помните, что эти компоненты по умолчанию являются серверными. - Чтобы узнать текущий маршрут в
getServerSideProps
, просто используйтеreq.url
из контекста. Это так просто! - Чтобы получить текущий URL-адрес в
getServerSideProps
, используйте функциюgetUrl
из библиотекиnextjs-current-url
. Просто пропуститеcontext.req
, и все готово! - Хотите получить полный URL?
useUrl
крючок из библиотекиnextjs-current-url
— ваш друг. Он расскажет вам все об URL.
Все сумасшедшие вещи, которые делает JavaScript
Как раз тогда, когда вы думали, что знаете все причуды!
Вооружитесь броней, чтобы избежать болезненных ошибок и сэкономить драгоценное время с Каждое безумие, что делает JavaScript, увлекательным руководством по тонким предостережениям и менее известные части JavaScript.
Возьмите бесплатную копию здесь сегодня.