problemi/client/App.tsx

import Router from 'preact-router'
import { route } from 'preact-router'
import { useContext, useEffect } from 'preact/hooks'
import { prependBaseUrl } from './api'
import { ServerContext } from './hooks'
import { UserProvider } from './hooks/useCurrentUser'

import { AdminPage } from './pages/AdminPage'
import { HomePage } from './pages/HomePage'
import { LoginPage } from './pages/LoginPage'
import { ProblemPage } from './pages/ProblemPage'
import { ProfilePage } from './pages/ProfilePage'
import { ScoresPage } from './pages/ScoresPage'

const Redirect = ({ to }: { to: string }) => {
    useEffect(() => {
        route(prependBaseUrl(to), true)
    }, [])

    return (
        <>
            Redirecting to <pre>{to}</pre>...
        </>
    )
}

export const App = ({ url }: { url?: string }) => {
    // during server side rendering don't prepend the BASE_URL
    const pbu = useContext(ServerContext) ? (s: string) => s : prependBaseUrl

    return (
        <UserProvider>
            <Router url={url}>
                <HomePage
                    // @ts-ignore
                    path={pbu('/')}
                />
                <LoginPage
                    // @ts-ignore
                    path={pbu('/login')}
                />
                <ProfilePage
                    // @ts-ignore
                    path={pbu('/profile')}
                />
                <ProblemPage
                    // @ts-ignore
                    path={pbu('/problem/:id')}
                />
                <AdminPage
                    // @ts-ignore
                    path={pbu('/admin')}
                />
                <ScoresPage
                    // @ts-ignore
                    path={pbu('/scores')}
                />
                <Redirect
                    // @ts-ignore
                    default
                    to="/"
                />
            </Router>
        </UserProvider>
    )
}