React components Route有什么问题？

Question

尝试使用React和React Hooks构建一个闪存卡应用程序时，我可以渲染我的主屏幕。在介绍Router时，我可以单击链接，将路径更新为我要查找的路径，但新页面中没有呈现任何内容。

App.js

import React, {useState, useEffect} from "react";
import Header from "./Header";
import NotFound from "./NotFound";
import ShowAllDecks from './ShowAllDecks';
import axios from 'axios';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function Layout() {
  const [flashcards, setFlashcards] = useState([])

  //Delete a deck of flashcards
  const deleteHandler = (id) => {
    const result = window.confirm('Are you sure you want to delete?'); 
    if (result) {
      setFlashcards(flashcards.filter(deck => deck.id !== id));
    };
 };

  useEffect(() => {
    axios
    .get('http://localhost:5000/decks?_embed=cards')
    .then(res => {
      setFlashcards(res.data.map((questionItem, index) => {

        return {
          id: `${index}-${Date.now()}`,
          name: questionItem.name,
          description: questionItem.description,
          cards: questionItem.cards.length,
        }
      }))
    })
  }, [])

  return (
    <div>
      <Header />
      <Router>
        <Switch>
          <Route exact={true} path={'/'}>
            <ShowAllDecks flashcards={flashcards} setFlashcards={setFlashcards} deleteHandler={deleteHandler} />
          </Route>
        </Switch>
      </Router>
      <NotFound />
    </div>
  )

}

ShowAllDecks.js -->抽认卡组列表

import React from 'react';
import Deck from './Deck';
import ViewDeck from './ViewDeck';

function ShowAllDecks({ flashcards, deleteHandler }) {

    return (
        <div className='container'>
            <button>Create New</button>
            {flashcards.map((flashcard) => {
                return (
                    <Deck flashcards={flashcards} flashcard={flashcard} key={flashcard.id} deleteHandler={deleteHandler} />
                )
            })}
        </div>
    )
}

export default ShowAllDecks;

Deck.js -->单副抽认卡

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import ViewDeck from './ViewDeck';

function Deck({ flashcard, flashcards, setFlashcards, deleteHandler}) {

    return (
        <div className='container'>
            <div className='card'>
            <div className='card-body'>
                <h3 className='card-title'>{flashcard.name}</h3>
                <p className='card-text'>{flashcard.description}</p>
                <p className='card-text'>{flashcard.cards} cards</p>
                <Link to={`decks/${flashcard.id}`}>View</Link>
                <button>Study</button>
                <button onClick={() => deleteHandler(flashcard.id)}><i className="fas fa-trash" /></button>
            </div>
            <Router>
                <Switch>
                    <Route exact={true} path={`decks/${flashcard.id}`}>
                        <ViewDeck flashcards={flashcards} flashcard={flashcard} deleteHandler={deleteHandler} />
                    </Route>
                </Switch>
            </Router>
            </div>

        </div>
    )
}

export default Deck;

ViewDeck.js -->应该是单个卡片组的新屏幕，我可以在其中查看卡片组中的卡片列表，编辑卡片，或添加新卡片。

import React from 'react';

function ViewDeck({ flashcards, flashcard, deleteHandler }) {
    console.log(flashcards)
    return (
        <p>{flashcards.name}</p>
    )
}
 
export default ViewDeck;

当在索引路由上时，flashcard是一个对象数组，而flashcard是一副卡片对象。我在路由或组件方面做错了什么，导致我的组件无法呈现？

URL示例：

[
  {
    "id": 1,
    "name": "Rendering in React",
    "description": "React's component structure allows for quickly building a complex web application that relies on DOM manipulation. ",
    "cards": [
      {
        "id": 1,
        "front": "Differentiate between Real DOM and Virtual DOM.",
        "back": "Virtual DOM updates are faster but do not directly update the HTML",
        "deckId": 1
      },
      {
        "id": 2,
        "front": "How do you modify the state of a different React component?",
        "back": "Not at all! State is visible to the component only.",
        "deckId": 1
      },
      {
        "id": 3,
        "front": "How do you pass data 'down' to a React child component?",
        "back": "As properties or props",
        "deckId": 1
      },
      {
        "cards": [],
        "front": "b",
        "back": "b",
        "deckId": 1,
        "id": 7
      }
    ]
  }
]

Answer 1

由于您在沙箱中保留了Deck元素为空，因此我必须想出我自己的：

          <div>
            Card Name: {flashcard.name}
            <br />
            <Link to={`/decks/${flashcard.id}`}>click on card</Link>
          </div>

但是想法很简单，您需要在更高的级别定义路由，然后只需在Deck元素中创建指向这些路由的链接。以下是您的路由定义应该是什么样子：

      <Router>
        <Switch>
          <Route exact={true} path={"/"}>
            <ShowAllDecks
              flashcards={flashcards}
              setFlashcards={setFlashcards}
              deleteHandler={deleteHandler}
            />
          </Route>
        </Switch>

        {flashcards.map((item, i) => (
          <Switch key={i}>
            <Route exact path={`/decks/${item.id}`}>
              <ViewDeck flashcard={item} deleteHandler={deleteHandler} />
              {/* <div>Some stuff here</div> */}
            </Route>
          </Switch>
        ))}
      </Router>

这是一个有效的Sandbox。