A small react router

router.tsx

import { useCallback, useEffect, useState } from 'react'
import './App.css'

function One() {
    return <div>one</div>
}

function Two() {
    return <div>two</div>
}

function App() {
  const [state, setState] = useState('')

  const handleGoOne = useCallback(() => {
    window.history.pushState({
        path: '/one'
    }, '', '/one')
    setState('/one')
  }, []);
  const handleGoTwo = useCallback(() => {
    window.history.pushState({
        path: '/two'
    }, '', '/two')
    setState('/two')
  }, []);

  const handlePop = useCallback((e) => {
    console.log(e)

    // if not set state, only the path change, but the view will not change
    setState(e.state && e.state.path)
  }, [])

  useEffect(() => {
    window.addEventListener('popstate', handlePop)

    return () => {
        window.removeEventListener('popstate', handlePop)
    }
  }, [handlePop])

  return (
    <>
        <div>
            <button onClick={handleGoOne}>go one</button>
            <button onClick={handleGoTwo}>go two</button>
        </div>
        {state === '/one' && <One />}
        {state === '/two' && <Two />}
    </>
  )
}

export default App