Решено: реакция на рутер Връзката работи

Основният проблем, свързан с React Router Link, е, че той не актуализира правилно хронологията на браузъра при щракване. Това означава, че ако потребител щракне върху връзка и след това натисне бутона за връщане назад, той ще бъде върнат на предишната страница вместо на страницата, от която току-що е напуснал. Освен това това може да причини неочаквано поведение в някои случаи, като например при използване на низове на заявки или хеш фрагменти.

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

<Router>
  <div>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>

    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  </div>
</Router>

1. импортирайте { BrowserRouter като Router, Route, Link } от „react-router-dom“;
// Този ред импортира компонентите BrowserRouter, Route и Link от библиотеката react-router-dom.

2.
// Този ред създава компонент Router, който ще се използва за създаване на маршрути за нашето приложение.

3.

// Този ред създава елемент div, който ще съдържа всички наши маршрути и връзки.

4. Начало
// Този ред създава връзка към началната страница на нашето приложение с текст „Начало“.

5. За нас
// Този ред създава връзка към страницата за информация на нашето приложение с текста „Относно“.

6.
// Този ред създава маршрут за началната страница на нашето приложение и изобразява компонента Home, когато е достъпен от потребител.

7. //Този ред създава маршрут за страницата About на нашето приложение и изобразява компонента About, когато е достъпен от потребител.

8.

//Това затваря нашия div елемент, който съдържа всички наши маршрути и връзки

Връзка v6

Link v6 е нов компонент в React Router, който предоставя декларативно, достъпно решение за навигация за React приложения. Той заменя предишния компонент Link и предоставя повече функции и по-добра поддръжка за достъпност. Link v6 поддържа както обикновени връзки, така и динамично маршрутизиране, което позволява на разработчиците да създават мощни навигационни изживявания, без да се налага ръчно да управляват маршрути или да използват библиотеки на трети страни. Той също така поддържа изобразяване от страна на сървъра, което позволява на разработчиците да създават удобни за SEO приложения с минимални усилия. И накрая, Link v6 има вградена поддръжка за проследяване на анализи, което улеснява проследяването на потребителските взаимодействия с вашето приложение.

Защо React Router Link не работи

Има няколко възможни причини React Router Link да не работи в React Router. Най-често срещаната причина е, че компонентът, към който се свързва, не е правилно конфигуриран или настроен. Например, ако компонентът, към който се свързва, не е импортиран правилно или ако пътят на маршрута е неправилен, тогава React Router Link няма да работи. Освен това, ако има правописни грешки в пътя на маршрута или името на компонента, това също може да причини проблеми с React Router Link. И накрая, ако има конфликти между множество маршрути (като два маршрута с еднакъв точен път), това също може да причини проблеми с React Router Link.

Подобни публикации:

Оставете коментар