在我开始配置路线后，产品组件不再显示，知道吗？答案

【问题标题】：Product components not showing anymore after i started configuring routes, any idea?在我开始配置路线后，产品组件不再显示，知道吗？
【发布时间】：2022-11-13 20:30:43
【问题描述】：

我在控制台上收到错误消息，说我应该用 Routes 包裹我的子路线，并且所有路线仍然用 Container 包裹，即使我这样做了，错误仍然存在并且产品还没有显示。如果再次删除 Routes，什么也不会显示甚至导航栏。我还收到此警告“位置“/”处的匹配叶路由没有元素。这意味着默认情况下它将呈现一个空值，从而导致“空”页面。”

应用程序.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;

产品.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;

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

我想你把react-router-dom v6 版本和 v5 弄错了。您正在使用仅适用于 v6 版本的 Routes 以及带有 component 属性的 Route，仅适用于 v5 版本。我相信您使用的是 v6 版本。

如果是这样，只需更改：

<Route path="/" component={HomeScreen} exact />

至

<Route path="/" element={<HomeScreen />} />

笔记：exact 属性也已从 v6 版本中删除。

【讨论】：