test_router

React Router - Маршрутизация

Создадим пустой проект
1
yarn create vite . --template react-ts
Установка зависимостей
1
yarn
Установка React Router в качестве зависимости
1
yarn add react-router-dom@6
Импортируем библиотека в файл точки входа main.tsx
1
import { BrowserRouter } from "react-router-dom"
В этом же файле оборачиваем наше приложение в BrowserRouter и убираем React.StrictMode
1
2
3
<BrowserRouter> <App /> </BrowserRouter>

Пример, как выглядит приложение

1
2
3
4
5
6
7
8
9
10
11
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from "react-router-dom"
import App from './App'
import './index.css'


const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Очистим index.css
Удалить App.css и его import