|
React Router - Маршрутизация
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 12
| import React from 'react'
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>
); |
- Создадим файл c маршрутами routes.tsx
И добавим в него следующее
1 2 3 4 5
| import * as React from "react";
import { useRoutes } from "react-router-dom";
export const routes = () => {
return useRoutes([]);
} |
Создадим страницу Main
- Создадим папку pages для страниц нашего приложения
1
| ni -Path src/pages -ItemType "directory" |
Создадим папку Main
1
| ni -Path src/pages/Main -ItemType "directory" |
В этой папки создадим файл Main.tsx
1
| ni -Path src/pages/Main/Main.tsx |
Добавим в файл Main.tsx содержимое
1 2 3 4 5 6 7 8 9
| const Main = () => {
return (
<>
<h1>Main</h1>
</>
)
}
export default Main; |
- Подключим страницу Main в файле routes.tsx
1 2 3 4 5 6
| import Main from "./page/Main/Main";
{
path: "/",
element: <Main />,
} |
- В итоге наш файл routes.tsx должен выглядеть так
1 2 3 4 5 6 7 8 9 10 11
| import * as React from "react";
import { useRoutes } from "react-router-dom";
import Main from "./page/Main/Main";
export const routes = () => {
return useRoutes([
{
path: "/",
element: <Main />,
}
]);
} |
- Подключим файл с маршрутизаций в наше приложение App.tsx
1 2 3 4 5 6
| import { routes as Router } from "./routes";
const App = () => {
return <Router/>
}
export default App; |
|