in my src, I have State.js for create-context as follow State.js I**'m using react js current version and using public and private route**

    import React, { createContext, useReducer } from "react"
    let AppsContext = createContext({});
    const initialState = {
    appName : "Arrman",
    user : JSON.parse(localStorage.getItem("arrman-as-user")),
    }
    let reducer = ( state, action ) => {
    switch ( action.type ) {
        case "setAppName" : {
            return {...state, appName : action.payload.appName }
        }
        case "loadUser" : {
            const user = action.payload;
            localStorage.setItem("whatapp-clone-user",JSON.stringify(user));
            return {...state, user: user }
        }
        default:
            break;
       }
     }
     function AppsContextProvider(props) {
     const appState = {
        ...initialState
     }
     let [state, dispatch] = useReducer(reducer, appState);
     let value = {state, dispatch};
     return <AppsContext.Provider value={ value }>{props.children}</AppsContext.Provider>
     }
     export { AppsContext, AppsContextProvider}

---

// in my App.js I am creating component so I can use theme as per authentication

    import React, { Component, useContext } from 'react';
    import { BrowserRouter } from 'react-router-dom';
    import { AppsContext } from './AppState';
    import CreateRoutes from './routes/createRoutes';
    const App = () => {
    const {state, dispatch} = useContext(AppsContext);
    console.log(state)
    return (
    <BrowserRouter>
      <CreateRoutes></CreateRoutes>
    </BrowserRouter>
    );
    }
    export default App;

---

// in my CreateRouters.js

    import React, { useContext } from 'react';
    import PublicRoute from './PublicRoute';
    import PrivateRoute from './PrivateRoute';
    const CreateRoutes = () => {
    return (
    <>
      <PrivateRoute></PrivateRoute>
      <PublicRoute></PublicRoute>
    </>  
    )
    }
    export default CreateRoutes;

---