配置React Router路由后产品组件不显示问题求助

配置路由后产品组件无法显示，控制台提示需用Routes包裹子路由，但所有路由已被Container包裹，问题仍存在；移除Routes后连导航栏都不显示。同时收到警告：

"Matched leaf route at location "/" does not have an element. This means it will render an with a null value by default resulting in an "empty" page."

相关代码 #

App.js #

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

function App() {
  return (
    <Router>
      <Header />
      <main className="my-3">
        <Container>
          <Routes>
            <Route path="/" component={HomeScreen} exact />
            <Route path="/product/:id" component={ProductScreen} exact />
          </Routes>
        </Container>
      </main>
      <Footer />
    </Router>
  );
}

export default App;

HomeScreen.js #

import React from "react";
import products from "../../products";
import { Row, Col } from "react-bootstrap";
import Product from "../Product";

function HomeScreen() {
  return (
    <div>
      <h1 className="text-center">Latest Products</h1>
      <Row>
        {products.map((product) => (
          <Col key={product.id} sm={12} md={6} lg={4} xl={3}>
            {/* <h3>{product.name}</h3> */}
            <Product product={product} />
          </Col>
        ))}
      </Row>
    </div>
  );
}

export default HomeScreen;

Product.js #

import React from "react";
import { Card } from "react-bootstrap";
import Rating from "./Rating";
import { Link } from "react-router-dom";

function Product({ product }) {
  return (
    <Card className="my-3 p-3 rounded">
      <Link to={`/product/${product.id}`}>
        <Card.Img src={product.image} />
      </Link>

      <Card.Body>
        <Link to={`/product/${product.id}`}>
          <Card.Title as="div">
            <strong>{product.name}</strong>
          </Card.Title>
        </Link>
        <Card.Text as="div">
          <div className="my-3">
            {product.rating} from {product.numReviews} reviews
          </div>
        </Card.Text>
        <Card.Text as="h3">$ {product.price}</Card.Text>
        <Rating
          value={product.rating}
          text={`${product.numReviews} reviews`}
          color="#f8e825"
        />
      </Card.Body>
    </Card>
  );
}

export default Product;

问题根源是react-router-dom v6 语法变更：v6版本中Route组件不再支持component属性，必须改用element属性，并且需要传入JSX元素（而非组件引用）。

修改App.js中的路由配置部分，将component={HomeScreen}改为element={<HomeScreen />}，component={ProductScreen}改为element={<ProductScreen />}即可解决问题。

修改后的App.js代码：

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

function App() {
  return (
    <Router>
      <Header />
      <main className="my-3">
        <Container>
          <Routes>
            <Route path="/" element={<HomeScreen />} exact />
            <Route path="/product/:id" element={<ProductScreen />} exact />
          </Routes>
        </Container>
      </main>
      <Footer />
    </Router>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Khaled