page components are not rendered on navigation

[AnvarNazar]

My routes and page components

VideoApp.tsx

import {Route, Routes} from "@solidjs/router";
import Index from "./Index";
import Upload from "./Upload";

export default function VideoApp() {
    return <>
        <Routes>
            <Route path="/videos">
                <Route path="/" component={Index}/>
                <Route path="/upload" component={Upload}/>
            </Route>
        </Routes>
    </>
}

Index.tsx

import {A} from "@solidjs/router";

export default function Index() {
    return <>
        <h1>Index</h1>
        <A href="/videos/upload">Upload</A>
    </>
}

Upload.tsx

import {A} from "@solidjs/router";

export default function Upload() {
    return <>
        <h1>Upload</h1>
        <A href="/videos">Index</A>
    </>
}

The url changes in the address bar but the page component is not rendered. I found similar problems but they found the issue because of the incorrect usage of useParams(). I am not using parameters here.