Luncher/client/src/AppRoutes.tsx

import { Routes, Route } from "react-router-dom";
import { ProvideSettings } from "./context/settings";
// import Snowfall from "react-snowfall";
import { SnowOverlay } from 'react-snow-overlay';
import { ToastContainer } from "react-toastify";
import { SocketContext, socket } from "./context/socket";
import StatsPage from "./pages/StatsPage";
import OrderGroupsPage from "./pages/OrderGroupsPage";
import SuggestionsPage from "./pages/SuggestionsPage";
import App from "./App";

export const STATS_URL = '/stats';
export const OBJEDNANI_URL = '/objednani';
export const NAVRHY_URL = '/navrhy';

export default function AppRoutes() {
    return (
        <Routes>
            <Route path={STATS_URL} element={<StatsPage />} />
            <Route path={NAVRHY_URL} element={
                <ProvideSettings>
                    <SuggestionsPage />
                </ProvideSettings>
            } />
            <Route path={OBJEDNANI_URL} element={
                <ProvideSettings>
                    <SocketContext.Provider value={socket}>
                        <OrderGroupsPage />
                        <ToastContainer />
                    </SocketContext.Provider>
                </ProvideSettings>
            } />
            <Route path="/" element={
                <ProvideSettings>
                    <SocketContext.Provider value={socket}>
                        <>
                            {/* <Snowfall style={{
                                zIndex: 2,
                                position: 'fixed',
                                width: '100vw',
                                height: '100vh'
                            }} /> */}
                            <SnowOverlay color={'rgba(240, 240, 240, 0.9)'} disabledOnSingleCpuDevices={true} />
                            <App />
                        </>
                        <ToastContainer />
                    </SocketContext.Provider>
                </ProvideSettings>
            } />
        </Routes>
    );
}