1

我有组件消费上下文 api。每个列表项都有一个自定义链接来重定向到它的页面。

我正在尝试渲染每个组件列表

对于“Product.jf，Details.js”组件，我可以渲染它们。但是，对于“ Cart.js ”，我不能。

我需要你的帮助来解决这个问题。**

谢谢您的帮助

{/* Section Component */}

import React, { Component } from "react";
import { Switch, Route } from "react-router-dom";
import Cart from "../Section/Cart";
import Details from "../Section/Details";
import Products from "../Section/Products";

export class Section extends Component {
  render() {
    return (
      <section>
        <Switch>
          {/* <Route path="/" component={Products} exact /> */}
          <Route path={"/product"} component={Products} exact />
          <Route path={"/product/:id"} component={Details} exact />
          <Route path={"/product/:id"} component={Details} exact />
          <Route exact path={"/cart"} component={Cart} exact />
        </Switch>
      </section>
    );
  }
}

export default Section;

{/* App Component*/}

import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import AppFooter from "./components/layouts/AppFooter";
import AppNavbar from "./components/layouts/AppNavbar";
import { DataProvider } from "./components/layouts/Context";
import Section from "./components/layouts/Section";


function App() {
  return (
    <div>
      <DataProvider>
        <Router>
          <AppNavbar />
          <Section />
          <AppFooter />
        </Router>
      </DataProvider>
    </div>
  );
}

export default App;

{/* Cart Component */}

import React, { Component } from "react";
import { DataContext } from "../layouts/Context";

export class Cart extends Component {
  static contextType = DataContext;

  render() {
    const { cart } = this.context;
    return (
      <div>
        <h1>Cart</h1>
      </div>
    );
  }
}

export default Cart;

项目沙箱

4

1 回答 1

0

沙箱中的第一个问题是您没有App在内部渲染组件index.js，而是在其他地方渲染。您还拥有一个Cart.js导入和使用的文件，但其中没有任何内容。

组件中的路由部分Section工作得很好：

export class Section extends Component {
  render() {
    return (
      <section>
        <Switch>
          <Route path="/product" component={Products} exact />
          <Route path="/product/:id" component={Details} />
          <Route path="/cart" component={Cart} />
        </Switch>
      </section>
    );
  }
}

index.js

ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById("container")
);

App.js

function App() {
  return (
    <div>
      <DataProvider>  
        <Router>
          <Section />
        </Router>
      </DataProvider>
    </div>
  );
}

工作沙箱

于 2021-01-29T09:11:05.800 回答