Роутеры в React Router

Прежде всего для создания маршрутизации нужно начать с роутера (Router). Это компонент верхнего уровня, благодаря которому, работают все остальные компоненты и хуки.

Роутеры бывают нескольких типов. Большинство веб-приложений используют BrowserRouter. Если же по каким-то причинам нельзя использовать полный URL, то HashRouter. Для тестирования компонентов очень удобен MemoryRouter. Роутер NativeRouter, как видно по названию, используется для нативных разработок. Выберите StaticRouter, если вы хотите использовать маршрутизатор данных для рендеринга на своем сервере, к примеру на NodeJS.

Для использования одного из этих роутеров нужно просто обернуть код в выбранный компонент следущим образом, например, для HashRouter это:

function App() {
	return (
		<HashRouter>
			/* Ваш код */
		</HashRouter>
	);
}

Правда этот синтаксис уже считается немного устаревшим. Для того, чтобы в дальнейшем у нас был доступ к новым API (к примеру, некоторым хукам и различным полезным свойствам), которые постоянно обновляются и добавляются, рекомендуется использовать более современный синтаксис для создания роутеров, то есть вместо вышуказанных компонентов нужно использовать createBrowserRouter, createMemoryRouter, createHashRouter и createStaticRouter.