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