javascript - React 路由器显示没有匹配的路由器

Question

应用程序.js

import Login from './Auth/components/login/Login';
import { Route, BrowserRouter, Routes, Outlet } from 'react-router-dom';
import SignIn from './Auth/components/signin/Signin';
import Home from './Home/Home';
import Dogs from './pets/Dogs';
import Cats from './pets/Cats';
import Others from './pets/Others';
import Pets from './pets/Pets';
import { Header } from './ui/Header/Header';
import { ContextClickValue } from './context/ContextClick';
import Cart from './Auth/components/cart/Cart';


function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} >
          </Route>
        </Routes>
        <Header />
        <Routes>
          <Route path="/login" element={<Login />}></Route>
          <Route path="/signin" element={<SignIn />}></Route>
          <Route path="/cart" element={<Cart />}></Route>
          <Route path="pets" element={< Outlet />}>
            <Route index element={<Pets />} />
            <Route path="dogs" element={<Dogs />} />
            <Route path="cats" element={<Cats />} />
            <Route path="others" element={<Others />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

标题.js

import { menuItems } from "../../Home/MenuItems";
import MenuItemComponent from "./MenuItemComponent";
import HeaderStyles from "./Header.module.css";
import { ContextClick, ContextClickValue } from "../../context/ContextClick";
import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
import  {useSelector} from 'react-redux'
import { NavLink, useNavigate } from "react-router-dom";


export function Header() {
    const cart = useSelector(state => state.cart.cart)
    const  navigate = useNavigate()

    function navigateToCart(e){
         e.preventDefault()
        navigate('/cart')
    }
    let  total = 0;
    return (
        <section className={HeaderStyles.navbar}>
            <header>
                <h4 className={HeaderStyles.logo}>PETSHOP</h4>
                <nav>
                        <MenuItemComponent items={menuItems} />
                </nav>
            </header>
            <section style={{ float:'right',margin:30, color:'white'}}>
            <AddShoppingCartIcon  style={{cursor:'pointer'}} onClick={navigateToCart}/>
            {cart.forEach(item => {
                total += item.quantity
            })}
            <span>{total}</span>
            </section>
        </section>
    )
}

我也尝试过使用 Navlink

 <NavLink to="/cart">
             <AddShoppingCartIcon  style={{cursor:'pointer'}} />
            {cart.forEach(item => {
                total += item.quantity
            })}
            </NavLink>  

1. 我正在尝试导航到购物车(我不知道为什么它不起作用)

2. 在开发工具中，它显示匹配的路由器(我尝试清除缓存并硬重新加载并重新启动我的服务器)

3. 我已更换购物车来登录以检查其是否导航成功

4. 沙盒链接 https://codesandbox.io/p/github/muthyalaDivyaVenkatesh/authentication/master

任何人都可以告诉我为什么它不起作用。

Answer 1

问题

您正在渲染 2 个 Header 组件，一个位于 Routes 组件内的 Home 组件内，另一个位于其自身的路由外部。 Header 呈现链接，其中一个目标为 "/cart"，但 Routes 组件不会呈现该路径的路线。 其他 Routes 组件缺少路径 "/" 上的路由渲染。

此外，Cart 组件不会返回从状态中选择的购物车数据的映射 JSX。

function Cart() {  
  const cart = useSelector((state)=> state.cart.cart)
    
  return (
    <div>
      {cart.map(cartItem => {
        <ShoppingCard                  // <-- not returned!!
          imageUrl={cartItem.imageUrl}
          price={cartItem.price}
        />
      })}
    </div>
  )
}

解决方案

创建一个呈现 Header 组件的布局组件，并从 Home 组件中删除 Header。

App.js

const AppLayout = () => (
  <>
    <Header />
    <Outlet />
  </>
);

function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route element={<AppLayout />}>
            <Route path="/" element={<Home />} />
            <Route path="/login" element={<Login />} />
            <Route path="/signin" element={<SignIn />} />
            <Route path="/cart" element={<Cart />} />
            <Route path="pets">
              <Route index element={<Pets />} />
              <Route path="dogs" element={<Dogs />} />
              <Route path="cats" element={<Cats />} />
              <Route path="others" element={<Others />} />
            </Route>
          </Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

Home.js

export default function Home() {
  return (
    <>
      <ImageChanging />
      <TopDeals />
    </>
  );
}

Cart.js

function Cart() {
  const cart = useSelector((state) => state.cart.cart);

  return (
    <div>
      <h1>Cart</h1>
      {cart.map((cartItem) => {
        return (          // <-- return the ShoppingCard component
          <ShoppingCard
            width={300}
            height={300}
            {...cartItem}
          />
        );
      })}
    </div>
  );
}