most trivial React Router usecase not working - Route won't render - reactjs

Question

I'm writing my first React app, in Typescript.
Following a tutorial, I've created a single <Link> that references a single <Route> all inside my <Router> component. When I click the Link in my browser, the URL changes, but the Route does not render. I cannot figure out why the Route does not render. I've read a bunch of SO questions, but they're all related to advanced uses of Router; I can't get the most basic usecase to work.
Here's my top-level component:
import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
import {StaticComponent} from "./StaticComponent/StaticComponent";
export default class App extends Component{
render() {
return (
<div className="App">
<Router>
<header className="App-header">
<span>header</span>
<Link to="/staticComponent">Static Component</Link>
</header>
<main>
<span>body</span>
<Route path="/staticComponent" element={StaticComponent}/>
</main>
</Router>
</div>
);
};
}
Here's StaticComponent:
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom'
export function StaticComponent () {
return (
<h2>You are at Static Component</h2>
);
};
As you can see, top-level component displays as you'd expect:
But when I click the link, the StaticComponent does not display:
Is there some small detail I'm getting wrong here? Thanks!

Answer 1

I never figured out how to use the "element" attribute on the <Route> element, nor the "component" attribute that #gbalduzzi mentioned. However, implementing App.tsx in the following way does work:
import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import {StaticComponent} from "./StaticComponent/StaticComponent";
export default class App extends Component<{}, {}>{
render() {
return (
<div className="App">
<Router>
<header className="App-header">
<span>header</span>
<Link to="/staticComponent">Static Component</Link>
</header>
<main>
<span>body</span>
<Route path="/staticComponent">
<StaticComponent />
</Route>
</main>
</Router>
</div>
);
};
}
Also, line 2 of StaticComponent.tsx seems to have been unnecessary; I have since taken it out.
Finally, make sure you're using the correct version of React Router. The JSX files that work for React Router 5 do not seem to work for React Router 6.