问题:路由器修改了URL，但是没有呈现所有的组件

Question

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

我试图呈现组件的每个列表

"产品。摩根富林明,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;

项目沙箱

Answer 1

沙箱中的第一个问题是您没有在index.js中呈现App组件，而是呈现其他组件。你也有一个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>
);
}

工作沙箱