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

9
Pradhumn Sharma 12 Июн 2018 в 04:00

3 ответа

Ссылка и маршрут

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

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

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

Маршрутизатор React: https://reacttraining.com/react-router/web/guides/philosophy < / а>

Учебное пособие по React JS: https://reactjs.org/docs/hello-world.html

5
Christian 12 Июн 2018 в 04:40

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

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

<Link to="/example" />

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

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

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

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

5
alaboudi 12 Июн 2018 в 06:00
Как бы вы поступили с динамической маршрутизацией? Например, '/ product / 49', где вы должны передать идентификатор и вместе с ним опору (тип объекта).
 – 
ColdTuna
30 Май 2019 в 15:58
Ничего, я смотрю видео по указанной вами ссылке. Спасибо за отличный ответ.
 – 
ColdTuna
30 Май 2019 в 16:03
С удовольствием помогу
 – 
alaboudi
30 Май 2019 в 16:48

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

<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>
1
Ajay Banstola 30 Мар 2019 в 09:43