router/index.js

index.js

import React, {
  useContext,
  createContext,
  useEffect,
  useState,
  cloneElement
} from "react";

const RouterContext = createContext({ route: "", push: () => {} });

const RouterView = ({ config }) => {
  const router = useRouter();
  let Component = config[router.route] || null;

  return <Component />;
};

const useRouter = () => {
  const ctx = useContext(RouterContext);
  return ctx;
};

const AppRouter = ({ children }) => {
  const [route, setRoute] = useState("/");

  function push(newRoute) {
    setRoute(newRoute);
  }

  useEffect(() => {
    window.history.pushState({}, "", route);
  }, [route]);

  return (
    <RouterContext.Provider value={{ route, push }}>
      {children}
    </RouterContext.Provider>
  );
};

export { RouterView, AppRouter, useRouter, Link };