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

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

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

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

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

    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>
);
  5. Создадим файл c маршрутами routes.tsx
    1
    ni src/routes.tsx
    И добавим в него следующее
    1
    2
    3
    4
    5
    import * as React from "react";
import { useRoutes } from "react-router-dom";

export const routes = () => {
  return useRoutes([]);
}

Создадим страницу Main

  1. Создадим папку pages для страниц нашего приложения
    1
    ni -Path src/pages -ItemType "directory"

  2. Создадим папку Main

    1
    ni -Path src/pages/Main -ItemType "directory"

  3. В этой папки создадим файл Main.tsx

    1
    ni -Path src/pages/Main/Main.tsx

  4. Добавим в файл Main.tsx содержимое

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const Main = () => {

  return (
    <>
      <h1>Main</h1>
    </>
  )
}
export default Main;
  5. Подключим страницу Main в файле routes.tsx
    1
    2
    3
    4
    5
    6
    import Main from "./page/Main/Main";

    {
      path: "/",
      element: <Main />,
    }
  6. В итоге наш файл 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 />,
    }
  ]);
}
  7. Подключим файл с маршрутизаций в наше приложение App.tsx
    1
    2
    3
    4
    5
    6
    import { routes as Router } from "./routes";

const App = () => {
  return <Router/>
}

export default App;


Теги:
php