import { useRouter } from './useRouter'

import Home from './pages/Home'
import Blog from './pages/blog'
import About from './pages/About'
import Contact from './pages/Contact'

const routes = {
    "/": props => <Home {...props} />,
    "/post": props => <Blog {...props} />,
    "/about": props => <About {...props} />,
    "/contact": props => <Contact {...props} />,
}

export default function App() {

    const Page = useRouter(routes)

    return Page
}

import { useRouter } from './useRouter'
import routes from './routes'

const LoadingPage = (props) => <span>Loading...</span>

const NotFoundPage = (props) => <span>Page Not Found</span>

export default function App() {

    const Page = useRouter(routes, "", LoadingPage, NotFoundPage)

    return Page

}

import { useRouter } from './useRouter'
import routes from './routes'

const baseURL = "/test"

export default function App() {

    const Page = useRouter(routes, baseURL)

    return Page

}

export default function Page(props) {

    const {context, ...others} = props

    console.log(context)

    console.log(others)

    ...
}