反应路由器 v5 路由标签不呈现封闭组件

Question

我刚开始学习/使用 React 路由器，却被非常基本的东西卡住了。 如果我添加 <Route> ，则未加载封闭的组件。谁能帮我解决这个问题。我什至尝试删除其他组件并仅使用路由进行测试，但它也无法正常工作

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux'
import store from './store/store'
import { BrowserRouter } from 'react-router-dom'

ReactDOM.render(
  <React.StrictMode>

    <BrowserRouter>
      <Provider store={store}>
        <App />
      </Provider>
    </BrowserRouter>

  </React.StrictMode >,
  document.getElementById('root')
);

App.js：

import './App.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
import Header from './components/Header';
import ProductCard from './components/ProductCard';
import ProductPage from './components/ProductPage';
import Cart from './components/Cart';
import { useSelector } from 'react-redux';
import LoginForm from './components/LoginForm';
import { useState, useEffect } from 'react';
import { Route } from 'react-router-dom';


function App() {

  const showCartOption = useSelector(state => state.cart.showCartOption);
  const isAuthenticated = useSelector(state => state.auth.isAuthenticated);

  return (
    <div class="m-3 shadow p-2">
      <Header></Header>
      <div class="row" >
        {(isAuthenticated && showCartOption) &&
          <Route path="/products">
            <ProductPage />
          </Route>}
        {(isAuthenticated && !showCartOption) &&
          <Route path="/cart">
            <Cart />
          </Route>
        }

        {!isAuthenticated && <LoginForm></LoginForm>}
      </div>
    </div>
  );
}

export default App;

ProductPage.js：

import { useEffect, useState } from "react";
import ProductCard from "./ProductCard";



function ProductPage() {

    const [products, setProducts] = useState([]);

    const productDescriptionLength = 75;
    const productTitleLength = 15;

    console.log("rendering : ");
    console.log(products);

    useEffect(() => {
        console.log("fetching products");

        const productResponse = fetch('https://fakestoreapi.com/products')
            .then(res => {
                return res.json();
            })
            .then(res => {
                console.log("resolved response : ");
                console.log(res);
                const translatedResponse = res.map(product => {
                    return {
                        productId: product.id,
                        productTitle: product.title.substring(0, productTitleLength) + "...",
                        productPrice: product.price,
                        productDescription: product.description.substring(0, productDescriptionLength) + "...",
                        productImage: product.image
                    }
                })

                return translatedResponse;
            })
            .then(res => {
                console.log(res);
                setProducts(res);
            });

    }, [])

    return (
        <div className="row row-cols-1 row-cols-md-4 g-4">
            {
                products.length > 0 && products.map(product =>
                    <div class="col">
                        <ProductCard
                            productTitle={product.productTitle}
                            productPrice={product.productPrice}
                            productImage={product.productImage}
                            productDescription={product.productDescription}
                        />
                    </div>
                )
            }
        </div>
    );
}

export default ProductPage;

cart.js：

import { useState } from "react";
import { useSelector } from "react-redux";
import CartCard from "./CartCard";

function Cart() {

    const cartItems = useSelector(state => state.cart.cartItems);
    console.log("cartItems : ");
    console.log(cartItems);

    return (
        <div class="">
            {cartItems.length === 0 && <p class="m-5 text-center fs-1  shadow">Your cart is empty. Happy Shopping !</p>}

            {cartItems.length > 0 &&
                cartItems.map(cartItem => {

                    return <CartCard
                        productTitle={cartItem.productTitle}
                        productPrice={cartItem.productPrice}
                        productDescription={cartItem.productDescription}>
                    </CartCard>
                })
            }

        </div>
    );
}

export default Cart;

我可以看到导航栏，但在 route 中看不到任何封闭的组件

Answer 1

您的路由应该在 React Router v5 中的 Switch 组件内。

类似这样的：

function App() {
    const showCartOption = useSelector((state) => state.cart.showCartOption);
    const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);

    return (
        <div class='m-3 shadow p-2'>
            <Header></Header>
            <div class='row'>
                <Switch>
                    <Route path='/products'>
                        {isAuthenticated && showCartOption && <ProductPage />}
                    </Route>

                    <Route path='/cart'>
                        {isAuthenticated && !showCartOption && <Cart />}
                    </Route>

                    {!isAuthenticated && <LoginForm></LoginForm>}
                </Switch>
            </div>
        </div>
    );
}

阅读文档。 https://v5.reactrouter.com/web/guides/quick-start