React Router DOM первое знакомство

Хочу сделать админку к калькулятору. На ней мы будем включать в меню или выключать какие-то калькуляторы. Всего у нас 5 видов калькуляторов, которые находятся на одно странице:

Я хочу, чтобы была еще одна страница - админка, где с помощью express.js мы бы настраивали сколько у нас будет активных калькуляторов.

Для создания маршрутизации воспользуюсь React Router

Устанавливаем пакет npm i react-router-dom

Импортируем BrowserRouter:

import {BrowserRouter} from 'react-router-dom';

Обворачиваем компонент внутри которого мы хотим делать навигацию

В компоненте App мы импортируем

import { Routes, Route, Link} from 'react-router-dom';

Импортируем два компонента, которые у нас будут на разных страницах:

import Main

import Admin

Обернем страницы в Routes и перечислим компоненты с помощью Route

Давайте сразу создадим и страницу 404, вдруг пользователь решит перейти на несуществующую страницу.

Урааа! У нас появилась отдельная страница админки, осталось ее создать и создать простейший бэкенд на express.js

А если перейти на случайную:

Всё хорошо, но при переходе с одной страницы на другую у нас происходит перезагрузка страницы. А нам бы это все сделать одним приложением без лишних перезагрузок. Для этого используется Link

Вместо <a href=" мы теперь будем использовать <Link to="

Вот и начало многостраничности положено. Подписывайтесь, будем двигаться дальше!