nested react router

App.tsx

import React from "react"
import {BrowserRouter, StaticRouter, Switch, Route, Link, Redirect} from "react-router-dom";

import Hello from "./Hello"
import World from "./World"

const isSSR = typeof window === "undefined"
const Router = isSSR ? StaticRouter : BrowserRouter

export default ({url}) => {
    return (
        <Router location={url} >
            <ul>
                <li>
                    <Link to="/">Home</Link>
                </li>
                <li>
                    <Link to="/user">hello</Link>
                </li>
            </ul>
            <Switch>
                <Route path="/" exact>hello, index</Route>

                <Route
                    path="/user"
                    render={({ match: { url } }) => (
                        <>
                            <Redirect from={`${url}/`} to={`${url}/hello`} />
                            <Redirect from={`${url}`} to={`${url}/hello`} />
                            <Route path={`${url}/hello`} component={Hello} />
                            <Route path={`${url}/world`} component={World} />
                        </>
                    )}
                />
                <Route path='*' component={() => <>404</>} />
            </Switch>
        </Router>
    )
}