Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Введение
В прошлом посте я рассказывал об учебнике по настройке 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". Если вам интересно узнать о курсе подробнее, регистрируйтесь на день открытых дверей онлайн, на нем преподаватель расскажет о формате и программе обучения.
