Как работает роутер React и в чем разница между <link>и <Route>

Question

В чем разница между Link и Route в реагирующем маршрутизаторе?Где мы их используем или мы используем их вместе или отдельно?Где найти подлинное и профессиональное руководство по веб-разработке React?

Answer 1

Компоненты Route и Link предназначены для совместного использования для выполнения различных задач в приложении.Во-первых, библиотека React Router предназначена для достижения двух целей: 1. Гарантирует, что переходы состояний фиксируются в строке URL-адреса.2. Гарантирует, что приложение запускается из надлежащего состояния при посещении через URL-адрес с отслеживанием состояния.

Роль компонента Link Компонент Link - это способ перехода состояния маршрута в приложении.Поэтому, если вы щелкнете по компоненту ссылки, будет активировано состояние маршрута.Например:

<Link to="/example" />

зарегистрирует, что приложение находится в состоянии «/ пример».На этом этапе именно компонент должен отображать соответствующий контент как таковой.

<Route path="/example" render={Profile] /> 

Итак, в двух словах, компонент Link отвечает за переход из состояния в состояние (страница-страница),в то время как компонент Route отвечает за переключение для отображения определенных компонентов в зависимости от состояния маршрута.

Лучший пример использования библиотеки можно найти по адресу https://reacttraining.com/react-router/

Answer 2

Я объясню на примере, если у меня есть:

<Router>
        <Route path = "/" component = {LoginModule} />
        <Route path = "/Register" component = {RegisterModule}/>
</Router>

Здесь, если я перейду к URL localhost:3000, будет отображаться модуль входа.В этом нет сомнений.

Но если я перейду к URL localhost:3000/Register, он отобразит модуль входа и регистрации под модулем входа на той же странице.Это потому, что в / Register также есть '/'.

Это можно решить с помощью:

<Router>
        <Route exact = {true} path = "/" component = {LoginModule} />
        <Route path = "/Register" component = {RegisterModule}/>
</Router>

Answer 3

Link and Route

<Link/> - это элемент, который вы можете использовать для навигации по маршрутам.

<Route/>, его основная задача заключается в том, чтобы визуализировать некоторый пользовательский интерфейс, когда местоположение соответствуетпуть маршрута.

Они используются отдельно.Ссылка зависит от местоположения маршрута.Но Route можно использовать без ссылки.

React Router: https://reacttraining.com/react-router/web/guides/philosophy

React JS Tutorial: https://reactjs.org/docs/hello-world.html