Мы можем получить текущий маршрут в компоненте 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.

Возьмите бесплатную копию здесь сегодня.