react-router: Три метода рендеринга маршрутов (компонентный, рендеринговый и дочерний)

Введение

В прошлом посте я рассказывал об учебнике по настройке react-router. Если вы не читали предыдущий пост, нажмите здесь! Я хочу добавить несколько важных тем о методах рендеринга маршрутов.

Методы рендеринга маршрута

Существует несколько способов рендеринга HTML компонента или тега с помощью <Route>. Я использовал этот способ в своем последнем посте.

<Route path="/">   <Home /> </Route>

В этом сниппете нет ничего плохого, и компонент <Home/> будет рендирован. Однако у вас не будет доступа к трем пропсам маршрута — match, location и history. Я расскажу об этих трех реквизитах в следующем посте. Оставайтесь с нами! Итак, давайте рассмотрим, как мы можем получить доступ к этим реквизитам, если мы используем эти три метода рендеринга маршрута.

1. Компонентный метод  <Route component/>

Первый метод рендеринга очень прост. Нам просто нужно поместить компонент в качестве пропса в Route.

<Route path="/" component={Home} />

const Home = (props) => {   console.log(props);   return <div>Home</div>; };

Вот и все. Вы получите эти пропсы.

Подождите. Как мы можем передать компоненту еще один проп? Ответ заключается в том, что мы не можем использовать этот метод рендеринга. Однако мы можем использовать render и children

2. Рендеринговый метод <Route render/>

Используя этот метод рендеринга, у вас будет доступ к использованию встроенной функции, и вы сможете передать другой пропс своему компоненту. При необходимости можно передать пропс маршрута в качестве параметра функции.

<Route  path="/contact"  render={(routeProps) => {   return <Contact name={name} address={address} {...routeProps} />;  }} />

С помощью <Route render/> можно также рендировать HTML тег, и для этого не требуется рендировать такой компонент, как <Route component/>.

<Route  path="/contact"  render={() => {   return (    <div>     <h2>Contact</h2>     <p>Name: {name}</p>     <p>Adress: {address}</p>    </div>   );  }} />

Я лично предпочитаю использовать этот метод рендеринга.

3. Дочерний метод  <Route children />

По сути, дочерний и рендеринговый методы одинаковы. Оба они получают функцию, но если вы используете дочерний метод, она будет рендирована, когда путь не совпадает. Также следует убедиться, что вы не используете <switch>.

<Route path="/" exact component={Home} /> <Route path="/about" render={() => <About></About>} /> <Route path="/portfolio" children={() => <Portfolio></Portfolio>} /> <Route path="/contact" children={() => <Contact></Contact>} />

В этом случае, когда пользователи сталкиваются с /, компоненты <Portfolio/> и <Contact/> будут рендированы, поскольку они используют метод рендеринга дочерних элементов. Честно говоря, я не знаю, когда следует использовать этот метод в реальном проекте, но вы можете посмотреть документацию здесь.

Заключение

Это три метода рендеринга маршрута, которые вы можете использовать. Сначала я был озадачен, почему существует так много способов для рендеринга маршрута. После того, как я несколько раз прочитал документацию, наступил момент «AHA». 

Я надеюсь, что это было полезно, и, пожалуйста, оставляйте комментарии для вопросов или отзывов! Счастливого кодирования!

Перевод материала подготовлен в рамках курса «React.js Developer». Если вам интересно узнать о курсе подробнее, регистрируйтесь на день открытых дверей онлайн, на нем преподаватель расскажет о формате и программе обучения.