如何为 React React Router 重写函数

Question

我知道新规则。但我还是不明白。请帮我重写代码，这样就没有错误了'Matched leaf route at location "/" does not have an element. '

import React from "react";
import { Route, Routes } from "react-router-dom";
import CartPage from "./CartPage/CartPage";
import ProductList from "./Products/ProducList";
const Main = ({ cartDataProops }) => {
  return (
    <main className="main">
      <div className="container">
        <div className="row">
          <div className="col-lg-3">Filter</div>
          <div className="col-lg-9">
            <Routes>
              <Route
                path="/"
                exact
                render={() => (
                  <ProductList cartDataProopsTwo={cartDataProops} />
                )}
              />

              <Route path="/cart" component={CartPage} />
            </Routes>
          </div>
        </div>
      </div>
    </main>
  );
};

export default Main;

Answer 1

您没有在任何路线上渲染任何路线组件。该错误仅指出当前正在渲染的路由的问题，即 "/"，没有正在渲染的内容。在 react-router-dom@6 中，所有 Route 组件在采用 ReactNode、a.k.a 的单个 element 道具上呈现其内容。 JSX。不再有任何 component 或 render 和 children 功能道具。

示例：

<Routes>
  <Route
    path="/"
    element={<ProductList cartDataProopsTwo={cartDataProops} />}
  />
  <Route path="/cart" element={<CartPage />} />
</Routes>

如何为 React React Router 重写函数

How to rewrite function for react React Router

reactjs

react-router

react-router-dom