<Link to = "/cart" ></Link> 更改了 url，但我的购物车组件未呈现答案

【问题标题】：<Link to = "/cart" ></Link> changes the url but my cart component is not getting rendered<Link to = "/cart" ></Link> 更改了 url，但我的购物车组件未呈现
【发布时间】：2020-11-13 04:32:37
【问题描述】：

在我的应用程序中，我使用的是react-router-dom，当我转到 /cart 页面时，url 正在更改，但购物车组件未呈现。

这是 App.js 组件：

import React, {useEffect,useState} from 'react';

import {SignUp,SignIn,Homepage,Cart} from './Components'

import {AuthProvider,useAuth} from "./contexts/AuthContext";

import {BrowserRouter as Router, Switch, Route } from 'react-router-dom';

import PrivateRoute from './Components/PrivateRoute/PrivateRoute';

function App(props) {
    
    return ( 
        <Router>
        <AuthProvider>
            <Switch>
                <Route exact path = "/signup" component = {SignUp} />
                <Route exact path = "/signin" component = {SignIn} />
                {/* <PrivateRoute path =  "/cart" component = {Cart}  /> */} // Cart component renders but I want to use this in homepage component
                <PrivateRoute exact  path = "/" component = {Homepage}  />
                
            </Switch>
        </AuthProvider>
        </Router>
    );
}

export default App;

这是主页组件：

import React, {useState,useEffect} from 'react';

import {Button,Card,Row,Col} from  'react-bootstrap';

import {useAuth} from '../../contexts/AuthContext';

import styles from './HomePage.module.css';

import {firestore} from '../../firebase';

import {BrowserRouter as Router, Switch, Route } from 'react-router-dom';



import {Navbar,Cart} from '../'


function HomePage(props) {
   
    const {currentUser} = useAuth();
    const [products,setProducts] = useState([]);
    const [itemsInCart,setItemsInCart]  = useState(0);


    return (
        <div>
            <Navbar items = {itemsInCart} /> 
            <Route path = "/cart" componenet = {Cart}></Route>  // this is not rendering Cartcomponent
            <div className = {styles.container}>
              {products.map((product,index)=> 
                <Card style={{ width: '18rem',border:'none' }} key = {index}>     
                 <Card.Img  variant="top" src={product.data.img} />
                    <Card.Body>
                      <Card.Title>{product.data.title}</Card.Title>
                        <Row>
                          <Col><Card.Title>Rs:{product.data.price}</Card.Title></Col> 
                           <Col><Button variant="warning" onClick = {() => handleAddToCard(product)}>Add to Cart</Button></Col> 
                        </Row>
                   </Card.Body>
                </Card> 
             )} 
        </div>
        </div>

    );
}

export default HomePage;

【问题讨论】：

标签： reactjs firebase react-router

【解决方案1】：

你可以使用 BrowserRouter 应该是顶级标签。

喜欢这个 app.js

 <BrowserRouter>
    <Switch>
      <Route exact path="/signup" component={SignUp} />
      <Route exact path="/signin" component={SignIn} />
      {/* <PrivateRoute path =  "/cart" component = {Cart}  /> */} // Cart
      component renders but I want to use this in homepage component
      <PrivateRoute exact path="/" component={Homepage} />
    </Switch>
  </BrowserRouter>;

我不需要使用任何与主页组件路由相关的东西。只需将其指定为路由组件

【讨论】：