组件不按路由呈现

Question

我正在尝试在我的 Routes 组件中呈现我的四个组件 Cart、Home、Catalog 和 Products。奇怪的是，只有我的家庭组件被渲染出来。我不知道我的代码有什么问题，希望我能得到你们的帮助！非常感谢！这是我的codesanbox链接：https://codesandbox.io/s/ecommerce-r168p?file=/src/routes/Routes.jsx

Answer 1

您可以使用exact props 来解决您的问题。

    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route exact path="/product" component={Product} />
        <Route exact path="/catalog" component={Catalog} />
        <Route exact path="/cart" component={Cart} />
      </Switch>
    </Router>

或者您可以将home 路由移到底部

    <Router>
      <Switch>
        <Route path="/product" component={Product} />
        <Route path="/catalog" component={Catalog} />
        <Route path="/cart" component={Cart} />
        <Route path="/" exact component={Home} />
      </Switch>
    </Router>

在这里您可以找到详细信息https://reactrouter.com/web/api/Route 这是工作示例https://codesandbox.io/s/ecommerce-forked-vj9uz?file=/src/components/Layout.js