Реакт 18 всё сломал (Новый свитч/роут и навигация)

[AndrianK]

Решения для урока (этап - написание Роута)
Мой индекс.js :

import React from 'react';
import App from './App';
import {StrictMode} from 'react';
import { createRoot } from 'react-dom/client';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement); // createRoot(container!) if you use TypeScript
root.render(
    <StrictMode>
        <App />
    </StrictMode>,
);

AppRoute:

import React from 'react';

import {
    Routes,
    Route
} from "react-router-dom";
import {authRoutes,publicRoutes} from "../routes";
import {SHOP_ROUTE} from "../utils/consts";


const AppRouter = () => {
    //const iaAuth = false
    return(
           <Routes>

                {authRoutes.map(({path, Component}) =>
                     <Route key = {path}  path={path} element={<Component/>} exact/>
                )}
                {publicRoutes.map(({path , Component}) =>
                   <Route key = {path} path = {path} element={<Component/>} exact/>
                )}
            </Routes>
    );
};
export default AppRouter;

Константы(может и не обязательно менять, не проверял):

export const ADMIN_ROUTE = 'admin' export const LOGIN_ROUTE = 'login' export const REG_ROUTE = 'registration' export const SHOP_ROUTE = '/' export const BASKET_ROUTE = 'basket' export const DEVICE_ROUTE = 'device'

[AndrianK]

import React, {createContext} from 'react';
import App from './App';
import { createRoot } from 'react-dom/client';
import UserStore  from './Store/UserStore'
import DeviceStore from "./Store/DeviceStore"; 


export const Context = createContext(null)
const rootElement = document.getElementById('root');
const root = createRoot(rootElement); // createRoot(container!) if you use TypeScript
root.render(
    <Context.Provider value={{
        user: new UserStore(),
        device: new DeviceStore()
    }}>
        <App />
    </Context.Provider>,
);

Добавил контекст

НавБар:
ms-auto вместо ml-auto

[AndrianK]

Вместо History (2:06:00):

import {useNavigate} from "react-router-dom";
const histoty= useNavigate() //возможно это считается дурным тоном, но да ладно
<Button variant={"outline-light"} onClick={() => history(ADMIN_ROUTE)}>Админ Панель

[exodie]

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

const navigate = useNavigate();

navigate('/YOUR_NEEDED_LINK', { replace: true, state: IF_NEEDED}), тоже неплохо, * но лучше прямые ссылки в navigate не использовать.