Redirect js: How To Redirect to Another Webpage

Содержание

next.config.js: Перенаправления | Next.js

Примеры

Перенаправления

История версий

Версия	Изменения
`v10.2.0` `1 добавил.`
`v9.5.0`	Добавлены редиректы.

Перенаправления позволяют перенаправить путь входящего запроса на другой путь назначения.

Чтобы использовать перенаправления, вы можете использовать ключ перенаправления в next.config.js :

 module.exports = {
  асинхронные перенаправления () {
    возвращаться [
      {
        источник: '/о',
        место назначения: '/',
        постоянный: правда,
      },
    ]
  },
}

перенаправляет — это асинхронная функция, которая ожидает возврата массива, содержащего объекты с источником , назначением и постоянными свойствами:

источник — шаблон пути входящего запроса.
пункт назначения — это путь, по которому вы хотите выполнить маршрут.
постоянный истинный или ложный - если истинный будет использовать код состояния 308, который указывает клиентам/поисковым системам навсегда кэшировать перенаправление, если ложное будет использовать код состояния 307, который является временным и не является кэшировано.

Почему Next.js использует 307 и 308? Традиционно код 302 использовался для временного перенаправления, а код 301 — для постоянного перенаправления, но многие браузеры изменили метод запроса перенаправления на

GET независимо от исходного метода. Например, если браузер сделал запрос POST /v1/users , который вернул код состояния 302 с местоположением /v2/users , последующий запрос может быть GET /v2/users вместо ожидаемого . ПОСТ /v2/пользователи . Next.js использует коды состояния временного перенаправления 307 и постоянного перенаправления 308, чтобы явно сохранить используемый метод запроса.

basePath : false или undefined - если false basePath не будет включен при сопоставлении, может использоваться только для внешних перенаправлений.
локаль : false или undefined - не следует ли включать локаль при сопоставлении.
has — это массив объектов has со свойствами type , key и value .
отсутствующий представляет собой массив отсутствующих объектов со свойствами типа , ключа и значения .

Перенаправления проверяются перед файловой системой, которая включает страницы и файлы

/public .

Перенаправления не применяются к маршрутизации на стороне клиента ( Link , router. push ), если промежуточное ПО не присутствует и не соответствует пути.

При применении перенаправления любые значения запроса, предоставленные в запросе, будут переданы в пункт назначения перенаправления. Например, см. следующую конфигурацию перенаправления:

 {
  источник: '/старый-блог/:путь*',
  пункт назначения: '/блог/:путь*',
  постоянный: ложный
}

При запросе /old-blog/post-1?hello=world клиент будет перенаправлен на

/blog/post-1?hello=world .

Совпадения путей разрешены, например, /old-blog/:slug будет соответствовать /old-blog/hello-world (без вложенных путей):

 module.exports = {
  асинхронные перенаправления () {
    возвращаться [
      {
        источник: '/old-blog/:slug',
        назначение: '/news/:slug', // Соответствующие параметры могут использоваться в назначении
        постоянный: правда,
      },
    ]
  },
}

Сопоставление пути с подстановочным знаком

Для сопоставления пути с подстановочным знаком вы можете использовать * после параметра, например, /blog/:slug* будет соответствовать /blog/a/b/c/d/hello-world :

 модуль.  экспорт = {
  асинхронные перенаправления () {
    возвращаться [
      {
        источник: '/блог/:слаг*',
        назначение: '/news/:slug*', // Соответствующие параметры могут использоваться в назначении
        постоянный: правда,
      },
    ]
  },
}

Соответствие пути регулярного выражения

Чтобы найти соответствие пути регулярного выражения, вы можете заключить регулярное выражение в круглые скобки после параметра, например /post/:slug(\\d{1,}) будет соответствовать /post/123 , но не /post/abc :

 module.exports = {
  асинхронные перенаправления () {
    возвращаться [
      {
        источник: '/post/:slug(\\d{1,})',
        назначение: '/news/:slug', // Соответствующие параметры могут использоваться в назначении
        постоянный: ложный,
      },
    ]
  },
}

Следующие символы ( , ) , { , } , : , * , + , ? используются для сопоставления путей регулярных выражений, поэтому при использовании в источнике в качестве неспециальных значений их необходимо экранировать, добавив перед ними \\ :

 module.  exports = {
  асинхронные перенаправления () {
    возвращаться [
      {
        // это будет соответствовать запрашиваемому `/english(default)/something`
        источник: '/english\\(по умолчанию\\)/:slug',
        пункт назначения: '/en-us/:slug',
        постоянный: ложный,
      },
    ]
  },
}

Для соответствия перенаправлению только в том случае, если значения заголовка, файла cookie или запроса также соответствуют имеет поле или не соответствует , можно использовать отсутствующее поле . И исходный , и все имеют элементы , которые должны совпадать, и все отсутствующие элементы не должны совпадать для применения перенаправления.

имеет и отсутствующие Предметы могут иметь следующие поля:

Тип : Строка — Должен быть либо заголовок , Cookie , HEST , OR 2222222222222222222222222222222222222.
ключ : Строка - ключ выбранного типа для сопоставления.
значение : Строка или undefined - значение для проверки, если не определено, любое значение будет соответствовать. Строка, подобная регулярному выражению, может использоваться для захвата определенной части значения, например. если значение first-(?.*) используется для first-second , то second можно будет использовать в пункте назначения с :paramName .

 модуль.экспорт = {
  асинхронные перенаправления () {
    возвращаться [
      // если присутствует заголовок `x-redirect-me`,
      // это перенаправление будет применено
      {
        источник: '/:путь((?!другая-страница$).*)',
        имеет: [
          {
            тип: 'заголовок',
            ключ: 'x-перенаправить меня',
          },
        ],
        постоянный: ложный,
        пункт назначения: '/другая-страница',
      },
      // если присутствует заголовок `x-dont-redirect`,
      // это перенаправление НЕ будет применено
      {
        источник: '/:путь((?!другая-страница$).  *)',
        отсутствующий: [
          {
            тип: 'заголовок',
            ключ: 'x-не-перенаправлять',
          },
        ],
        постоянный: ложный,
        пункт назначения: '/другая-страница',
      },
      // если источник, запрос и файл cookie совпадают,
      // это перенаправление будет применено
      {
        источник: '/специфический/:путь*',
        имеет: [
          {
            тип: 'запрос',
            ключ: "страница",
            // значение страницы не будет доступно в
            // место назначения, так как значение предоставлено и не
            // использовать именованную группу захвата, например. (? домой)
            значение: «дом»,
          },
          {
            тип: 'куки',
            ключ: «авторизованный»,
            значение: «истина»,
          },
        ],
        постоянный: ложный,
        пункт назначения: '/другой/:путь*',
      },
      // если заголовок `x-authorized` присутствует и
      // содержит совпадающее значение, будет применено это перенаправление
      {
        источник: '/',
        имеет: [
          {
            тип: 'заголовок',
            ключ: «x-авторизованный»,
            значение: '(?<авторизованный> да|истина)',
          },
        ],
        постоянный: ложный,
        пункт назначения: '/home?authorized=:authorized',
      },
      // если хост `example. com`,
      // это перенаправление будет применено
      {
        источник: '/:путь((?!другая-страница$).*)',
        имеет: [
          {
            тип: «хост»,
            значение: 'example.com',
          },
        ],
        постоянный: ложный,
        пункт назначения: '/другая-страница',
      },
    ]
  },
}

`Перенаправления с поддержкой basePath`

При использовании поддержки basePath с перенаправлениями каждый источник и пункт назначения автоматически имеют префикс basePath , если только вы не добавите basePath module = 4exports 90s 90:19 redirect { базовый путь: '/ документы', асинхронные перенаправления () { возвращаться [ { источник: '/with-basePath', // автоматически становится /docs/with-basePath назначение: '/another', // автоматически становится /docs/another постоянный: ложный, }, { // не добавляет /docs, так как basePath: false установлен источник: '/без-basePath', пункт назначения: «https://example. com», базовый путь: ложь, постоянный: ложный, }, ] }, }

`Перенаправления с поддержкой i18n`

При использовании поддержки i18n с перенаправлениями каждый источник и пункт назначения автоматически получают префикс для обработки настроенных локалей , если вы не добавите локаль для перенаправления : false Если используется локаль : false , вы должны добавить префикс источника и назначения с локалью, чтобы они сопоставлялись правильно.

 модуль.экспорт = {
  i18n: {
    локали: ['en', 'fr', 'de'],
    язык по умолчанию: 'en',
  },
  асинхронные перенаправления () {
    возвращаться [
      {
        source: '/with-locale', // автоматически обрабатывает все локали
        назначение: '/another', // автоматически передает локаль на
        постоянный: ложный,
      },
      {
        // не обрабатывает локали автоматически, поскольку установлено значение locale: false
        источник: '/nl/with-locale-manual',
        пункт назначения: '/nl/другой',
        локаль: ложь,
        постоянный: ложный,
      },
      {
        // это соответствует '/', так как `en` является языком по умолчанию
        источник: '/ru',
        пункт назначения: '/en/other',
        локаль: ложь,
        постоянный: ложный,
      },
      // можно сопоставить все локали, даже если установлена локаль: false
      {
        источник: '/:локаль/страница',
        пункт назначения: '/en/newpage',
        постоянный: ложный,
        локаль: ложь,
      }
      {
        // это преобразуется в /(en|fr|de)/(. *), поэтому не будет соответствовать верхнему уровню
        // Маршруты `/` или `/fr`, такие как /:path*,
        источник: '/(.*)',
        пункт назначения: '/другой',
        постоянный: ложный,
      },
    ]
  },
}

В некоторых редких случаях вам может потребоваться назначить пользовательский код состояния для более старых HTTP-клиентов для правильного перенаправления. В этих случаях можно использовать свойство statusCode вместо постоянного свойства , но не оба сразу. Примечание. Для обеспечения совместимости с IE11 заголовок Refresh автоматически добавляется к коду состояния 308.

Внутри маршрутов API вы можете использовать res.redirect() .
Внутри getStaticProps и getServerSideProps , вы можете перенаправить определенные страницы во время запроса.

Как реализовать перенаправления на стороне клиента в Next.js

В vanilla React вы можете выполнять перенаправления, визуализируя компонент Redirect из библиотеки react-router-dom .

 импорт {Перенаправление} из "react-router-dom"
...
<Точный путь маршрута="/">
    {вошел в систему?  : }

Но как реализовать переадресацию на стороне клиента с помощью встроенной системы маршрутизации Next.js?

В этой статье я расскажу о шагах по реализации перенаправления на стороне клиента в Next.js, используя в качестве примера, должен ли пользователь перейти на панель инструментов (если он вошел в систему) или на домашнюю страницу (если не вошел в систему).

1. Доступ к объекту маршрутизатора с помощью

useRouter()

В Next.js любая логика маршрутизации управляется объектом router , доступ к которому можно получить с помощью хука useRouter().

 импорт {useRouter} из «следующего/маршрутизатора»
приложение функции () {
  постоянный маршрутизатор = useRouter()
  ...
}
экспортировать приложение по умолчанию

Объект маршрутизатора предоставляет ряд свойств и функций, которые вы можете использовать для любых действий, связанных с маршрутизацией, таких как изменение страницы ( router. push() ) или получение текущего пути ( router.pathname ).

2. Поместите логику перенаправления внутри

useEffect()

В то время как vanilla React перенаправляет путем рендеринга компонента ( ), Next.js может изменить страницу, только вызвав функцию, такую как router. нажать() .

Лучшее место для вызова этой функции — useEffect() .

 импорт {useEffect} из "реагировать"
импортировать {useRouter} из "следующего/маршрутизатора"
приложение функции ({ авторизовался }) {
    постоянный маршрутизатор = useRouter()
    использоватьЭффект(() => {
        если (вошел в систему) {
            router.push("/приборная панель")
            возвращаться
        }
        роутер.push("/)
    }, [])
    вернуть "Загрузка..."
}
экспортировать приложение по умолчанию

3. Управление стеком истории с помощью

router.replace()

Изображение у вас есть функция, состоящая из нескольких страниц со следующей структурой URL:

/feature ( pages/feature/index. tsx для перенаправления логики на другие страницы)
/feature/start ( страниц/feature/start.tsx )
/feature/continue ( страниц/feature/continue.tsx )
/feature/success ( страниц/feature/end.tsx )

Что делать, если вы не хотите сохранять страницу перенаправления /feature в стеке истории?

Вы можете использовать router.replace().

Это изменит страницу, не сохраняя ее в стеке истории, избегая повторного выполнения логики перенаправления, если пользователь щелкнет стрелку назад в своем браузере.

 импорт {useEffect} из "реагировать"
импортировать {useRouter} из "следующего/маршрутизатора"
приложение функции ({ авторизовался }) {
 постоянный маршрутизатор = useRouter()
 использоватьЭффект(() => {
 если (вошел в систему) {
 router.replace("/приборная панель")
 возвращаться
 }
 роутер.No related posts.