reactjs React路由器显示无匹配的路由器

cclgggtu 于 2022-11-04 发布在 React

关注(0)|答案(1)|浏览(316)

App.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;

Header.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.我正在尝试导航到购物车（我不知道为什么它不工作）
1.在开发工具中，它显示为匹配的路由器（我尝试清除缓存和硬重载，并重新启动我的服务器）
1.我已更换购物车以登录，以检查是否已成功导航
1.沙盒链接https://codesandbox.io/p/github/muthyalaDivyaVenkatesh/authentication/master
有人能告诉我为什么它不工作吗？

reactjs

来源：https://stackoverflow.com/questions/74272091/react-router-is-showing-no-router-matched

1条答案

按热度按时间

lf3rwulv1#

个问题

您正在呈现2个Header组件，一个在Routes组件内的Home组件内，另一个在路由外单独呈现。Header呈现链接，其中一个链接指向"/cart"，但是Routes组件没有呈现该路径的路由。* 其他 * Routes组件缺少路径"/"上的路由呈现。
此外，Cart组件不会为从state中选择的购物车数据返回Map的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>
  );
}

赞(0）回复(0）举报 2022-11-04

我来回答

reactjs React路由器显示无匹配的路由器

1条答案

个问题

溶液

相关问题

热门标签

最新问答