为什么 Route 标签无法在 React 中渲染组件？

Question

App.js代码-

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./screens/HomeScreen";

const App = () => {
  return (
    <Router>
      <Header />
      <main className='py-3'>
        <Container>
           <HomeScreen />
        </Container>
      </main>
      <Footer />
    </Router>
  );
};

export default App;

我的 app.js 就是这样，一切正常。但是之后我添加了Route标签，代码变成了这样

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./screens/HomeScreen";

const App = () => {
  return (
    <Router>
      <Header />
      <main className='py-3'>
        <Container>
          <Route exact path='/' component={HomeScreen} />
        </Container>
      </main>
      <Footer />
    </Router>
  );
};

export default App;

但是添加Route后，HomeScreen没有渲染？谁能告诉我为什么会这样？

Answer 1

在 react-router-dom v6 中，Route 组件必须呈现为 Routes 组件，并且路由组件呈现在 element prop 作为 ReactElement (a.k.a.JSX) 自 component，以及 render 和 children 功能道具不再存在。

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./screens/HomeScreen";

const App = () => {
  return (
    <Router>
      <Header />
      <main className='py-3'>
        <Container>
          <Routes>
            <Route path='/' element={<HomeScreen />} />
          </Routes>
        </Container>
      </main>
      <Footer />
    </Router>
  );
};

为什么 Route 标签无法在 React 中渲染组件？

Why Route tag can't render the component in React?

javascript

frontend

reactjs

react-router

react-router-dom