dev-cyprium

@using LeagueHandlerCore.DTO.Forms
@inject IJSRuntime JSRuntime

<div @ref="containerRef" data-external-click>
    <input type="hidden" name="home-id">
    <label for="combobox" class="block text-sm font-medium leading-6 text-gray-900">@Label</label>
    <div class="relative mt-2">
        <h1>Show Dropdown: @ShowDropdown</h1>
        <input @onfocus="OnFocus" @bind:event="oninput" @bind="Search" id="combobox" type="text" class="w-full rounded-md border-0 bg-white py-1.5 pl-3 pr-12 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" role="combobox" aria-controls="options" aria-expanded="@ShowDropdown">

dev-cyprium

// router/index.js

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

  return Component ? <Component /> : <NotFound />;
};
  

dev-cyprium

/* 
router/index.js 
*/

/* Rest of the router code */

const Link = ({ href, activeClass, children }) => {
  const router = useRouter();

  const navTo = (route) => (ev) => {

dev-cyprium

import { useRouter } from './router';

function Navigation() {
  const router = useRouter();
  
  const changeRoute = (route) => () => {
    router.push(route); 
  }
  
  return (

dev-cyprium

export default function App() {
  /* ... */
  return <AppRouter>
    {/* Rest of the components */}
  </AppRouter>
}

dev-cyprium

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

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

dev-cyprium

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

const RouterContext = createContext(/* Context */);

const Home = () => {
 /* The route view */
}

const Page = () => {
 /* The page view */ 

dev-cyprium

const RouterView = ({ config }) => {
  const router = useContext(RouterContext);
  let Component = config[router.route] || null;
  return <Component />;
};

dev-cyprium

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

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

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

dev-cyprium

// File App.js
const RouterContext = createContext({
  route: "/",
  push: () => {}
});