react-router

import React, { createContext, useContext, useState, useEffect } from 'react'
const RouterContext = createContext({})
const BrowserRouter = (props) => {
    const [location, setLocation] = useState(window.location.pathname)

    useEffect(() => {
        const handlePopstate = () => {
            window.addEventListener('popstate', handlePopstate);
            return () => {
                window.removeEventListener('popstate', handlePopstate);
            }
        }
    }, [])

    return (
        <RouterContext.Provider value={{ location }}>
            {
                props.childern
            }
        </RouterContext.Provider>
    )
}

const Route = (props) => {
    const { component, route } = props
    const location = useContext(RouterContext)
    
    if(location === route) {
        return compnent
    } else {
        return null
    }
}

const Link = (props) => {
    const { to, children } = props
    const { handleLinkClick } = useContext(RouterContext);
    const handleClick = (event) => { event.preventDefault(); handleLinkClick(to); };
    return <a href="">
        {children}
    <a/>
}

pushstate

pushState() 方法可以向浏览器的历史记录中添加一条新的记录，并且不会立即跳转到新的页面。该方法接受三个参数：

• state：一个 JavaScript 对象，用于存储与新记录相关的数据。
• title：新记录的标题，目前大部分浏览器都忽略该参数。
• url：新记录的 URL，可以是相对路径或绝对路径。

replacestate

replaceState() 方法与 pushState() 方法类似，但是它会替换当前的历史记录，而不是添加一条新的记录。该方法接受的参数与 pushState() 方法相同。

popstate

当用户点击浏览器的前进或后退按钮时，或者使用 pushState() 或 replaceState() 方法修改历史记录时，都会触发 popstate 事件。该事件会在 window 对象上触发，可以通过 window.addEventListener() 方法来监听该事件。 popstate 事件的事件对象包含一个 state 属性，该属性是一个 JavaScript 对象，用于存储与当前历史记录相关的数据。当使用 pushState() 或 replaceState() 方法添加或修改历史记录时，可以将一个 JavaScript 对象作为第一个参数传递给这两个方法，该对象会被存储在历史记录中，并在触发 popstate 事件时作为事件对象的 state 属性返回。