react进行基本路由展示内容不显示

如果页面内容不展示，在App里面把component第一个小写
Home组件

import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    return (
      <h1>sdfsdfsdfsdfsd</h1>
    )
  }
}

About组件

import React, { Component } from 'react'

export default class About extends Component {
  render() {
    return (
      <div>123</div>
    )
  }
}

然后是index.js

import React from "react";
import App from "./App";
import {createRoot} from 'react-dom/client' 

const container=document.getElementById('root');
const root=createRoot(container);
root.render(<App/>);

app.jsx

import React, { Component } from 'react'
import {Link,BrowserRouter,Route} from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'

export default class App extends Component {
  render() {
    return (
      <div className="list">
       <BrowserRouter>
       <Link to="/about">About</Link>
        <Link to="/home">Home</Link>
        <div className="item">
        <Route  path="/about" component={About}></Route>
       <Route path="/home" component={Home}></Route>
          </div>
       </BrowserRouter>
      </div>
    )
  }
}