我无法使用react-route-dom渲染我的ProductList

Question

           <Col xs="9"> <Routes> <Route exact path="/" render={(props) => ( <ProductList {...props} products={this.state.products} addToCart={this.addToCart} currentCategory={this.state.currentCategory} info={productInfo} /> )} />

这是我的 App.js 文件。这不起作用。

我查看了react-route-dom旧版本，有些地方我们必须将开关替换为路由。但任何改变都没有改变结果。我看不到我的 ProductList 组件。

“react-router-dom”：“6.23.0”

Answer 1

在 React Router DOM 版本 6 中，组件用于定义路由，组件用于渲染特定路由的组件。以下是如何更新 App.js 文件以使用 React Router DOM 版本 6：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ProductList from './ProductList';

class App extends React.Component {
  state = {
    products: [],
    currentCategory: '',
  };

  addToCart = (product) => {
    // Add logic to add product to cart
  };

  render() {
    return (
      <Router>
        <Routes>
          <Route
            exact
            path="/"
            element={<ProductList products={this.state.products} addToCart={this.addToCart} currentCategory={this.state.currentCategory} />}
          />
        </Routes>
      </Router>
    );
  }
}

export default App;