Блог

Главная - Вопросы по программированию - React-Router-Dom: Разница между использованием компонента внутри маршрута synax и использованием /* компонента={Имя компонента} */ синтаксиса?

React-Router-Dom: Разница между использованием компонента внутри маршрута synax и использованием /* компонента={Имя компонента} */ синтаксиса?

#javascript #reactjs #react-router-dom

Вопрос:

Я новичок в React, и я видел два разных синтаксиса для маршрутизации с использованием react-router-dom, как показано ниже с примерами 1 и 2. Добро пожаловать-это всего лишь стандартный компонент реакции.

Пример1:

 <BrowserRouter>
  <Switch>
    <Route exact path="/"><Welcome /></Route>
  </Switch>
</BrowserRouter>

Пример2:

 <BrowserRouter>
  <Switch>
    <Route exact path="/" component={Welcome} />
  </Switch>
</BrowserRouter>

Есть ли какая-либо разница между этими двумя синтаксисами? По состоянию на 2021 год есть ли какие-то предпочтения?

Ответ №1:

Документация уже отвечает на этот вопрос для вас:

При использовании component (вместо render или children ) маршрутизатор использует React.createElement для создания нового элемента React из данного компонента. Это означает, что если вы предоставите встроенную функцию для поддержки компонента, вы будете создавать новый компонент при каждом рендеринге. Это приводит к размонтированию существующего компонента и установке нового компонента вместо простого обновления существующего компонента. При использовании встроенной функции для встроенного рендеринга используйте render или children опору.

Комментарии:

1. Хорошо, если я правильно понимаю, кажется, что использование визуализации или детей-лучшая практика, чем использование компонента. Кажется странным, что так много учебных пособий используют компонент!

2. Обычно это не так уж важно для «простых» маршрутов. Маршрутизатор повторно отображается только при изменении местоположения, что обычно включает переключение маршрутов/страниц и, следовательно, не зависит от повторного отображения. Но если у вас сложный маршрут, например , один для /project/{project}/jobs/{job} , то переключение с задания 1 на задание 2 приведет к повторному отображению всего компонента, даже если вы ожидали переключения маршрута задания только в под-маршрутизаторе в вашем компоненте.

Метки: