Решено: Како да преусмерим у Реацт Роутер в6

Последње ажурирање: 09/11/2023
Аутор: ЈаваСцрипт СоурцеТраил

Главни проблем у вези са преусмеравањем у Реацт Роутер в6 је тај што се синтакса за преусмеравања значајно променила у односу на претходне верзије. У в6, компонента Преусмеравање мора да се користи уместо елемент, а то проп мора бити обезбеђен са објектом који садржи својство патхнаме. Поред тога, сви додатни реквизити као што су параметри стања или упита такође морају бити укључени у овај објекат. Ово може отежати програмерима који су навикли да користе једноставнију синтаксу ранијих верзија Реацт Роутера.

In React Router v6, you can use the <Redirect> component to redirect from one page to another.

Example: 

import { Redirect } from 'react-router-dom'; 
 
<Route exact path="/old-path"> 
   <Redirect to="/new-path" /> 
</Route>

1. импорт { Редирецт } из 'реацт-роутер-дом';
– Ова линија увози компоненту Редирецт из библиотеке реацт-роутер-дом.

2.
– Ова линија креира компоненту руте са тачном путањом „/олд-патх“.

3.
– Ова линија користи компоненту Преусмеравање за преусмеравање са „/старе путање“ на „/нев-патх“.

Како могу да преусмерим у Реацт Роутер в6

v6

Реацт Роутер в6 обезбеђује компоненту за преусмеравање која се може користити за преусмеравање корисника са једне странице на другу. Да бисте користили компоненту Редирецт, потребно је да је увезете из пакета реацт-роутер-дом. Компонента Преусмеравање узима два пропса: од и до. „Од“ је путања тренутне странице, а „до“ је путања странице на коју желите да преусмерите кориснике. На пример, ако желите да преусмерите кориснике са /хомепаге на /абоут, ваш код би изгледао овако:

импорт { Редирецт } фром 'реацт-роутер-дом';

Шта је реагујући рутер?

Реацт Роутер је библиотека рутирања за Реацт која омогућава програмерима да креирају апликације на једној страници са навигацијом и динамичким рутирањем заснованим на стању. Помаже да се кориснички интерфејс синхронизује са УРЛ-ом, што корисницима олакшава дељење и обележавање УРЛ адреса. Реацт Роутер такође пружа моћне функције као што су лењо учитавање, заштита руте и руковање прелазом локације.

Типови рутера у реакцији

Реацт Роутер је библиотека рутирања за Реацт која омогућава програмерима да креирају апликације на једној страници са навигацијом и усмеравањем УРЛ-ова. Пружа три типа рутера: БровсерРоутер, ХасхРоутер и МемориРоутер.

БровсерРоутер: Овај рутер користи АПИ за историју ХТМЛ5 да би ваш кориснички интерфејс био синхронизован са УРЛ-ом. Користи се када желите да користите праве УРЛ адресе у својој апликацији.

ХасхРоутер: Овај рутер користи хеш део УРЛ-а (тј. #) да би ваш кориснички интерфејс био синхронизован са УРЛ-ом. Користи се када не желите да користите праве УРЛ адресе или када вам је потребна компатибилност са старијим прегледачима који не подржавају ХТМЛ5 АПИ за историју.

МемориРоутер: Овај рутер чува историју локација у меморији и не ступа у интеракцију са адресном траком претраживача нити креира стварне УРЛ адресе. Користан је за сврхе тестирања или за окружења у којима коришћење стварних УРЛ адреса није пожељно (нпр. приказивање на страни сервера).

Релатед постс: