Здравствуйте! Меня зовут Максим, и сегодня я хотел бы рассказать вам о том, как использовать роутинг в React v6, чтобы отображать header и footer на некоторых страницах сайта, но не на всех.
Перед тем, как начать работу с роутингом, убедитесь, что у вас установлена последняя версия React v6 и react-router-dom. Эти пакеты помогут нам управлять маршрутизацией в нашем приложении.Первым шагом будет создание основных компонентов нашего сайта⁚ Header, Footer и нескольких страниц. Для примера, я создам компоненты Home, About и Services.page.jsx. Внутри каждого из этих компонентов вы можете добавить любую необходимую разметку и функциональность.jsx
import React from ″react″;
import { BrowserRouter as Router, Route, Switch } from ″react-router-dom″;
import Header from ″./Header»;
import Footer from ″./Footer»;
import Home from ″./Home.page»;
import About from ″./About.page»;
import Services from ″./Services.page»;
const App > {
return (
);
};
export default App;
В этом примере, я создал обертку Router, внутри которой располагаются компоненты Header, Footer и Switch. Header и Footer отображаются на всех страницах, так как находятся за пределами Switch.
Switch компонент содержит несколько Route компонентов, которые отвечают за отображение разных страниц на основе текущего URL-адреса. Они определяют, какой компонент должен быть загружен для каждого маршрута.Теперь, чтобы отобразить страницы без Header и Footer, вы можете добавить дополнительные компоненты к Route, которые не включают эти элементы.jsx
import React from ″react″;
import { Route } from ″react-router-dom″;
const Home > {
return (
Добро пожаловать на наш сайт!
);
};
export default Home;
jsx
import React from ″react″;
import { Route } from ″react-router-dom″;
const About > {
return (
Мы команда профессионалов, предоставляющая качественные услуги в разных
областях.
);
};
export default About;
jsx
import React from ″react″;
import { Route } from ″react-router-dom″;
const Services > {
return (
- Web-разработка
- Дизайн
- Маркетинг
);
};
export default Services;
Теперь, когда мы создали компоненты для каждой страницы, добавили маршруты в основной компонент и определили, какие компоненты должны быть отображены на каждой странице, мы получили роутинг с разными шапками и подвалами.
Надеюсь, что эта статья помогла вам разобраться с тем, как использовать роутинг в React v6٫ чтобы управлять отображением header и footer на разных страницах вашего сайта. Удачи в работе с React!