在使用 react-router-dom 时遇到问题

Question

我正在关注 JavaBrains 的这个 YouTube 教程 https://www.youtube.com/watch?v=4iM7eEl3Rag&list=PLqq-6Pq4lTTa8V613TZhGq4o8hSgkMGQ0&index=9&t=292s

在他实现 BrowserRouter 之前，一切都很顺利。问题是我完全复制了他正在做的事情，但不幸的是我得到了一个空白页，无论我如何更改它仍然是空白的。任何想法如何解决它？我也在频道里问过，但没有答案。谢谢！ url 将是：localhost:3000/teams/xxx

这是App.js

的一段代码

import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { TeamPage } from './pages/TeamPage';

function App() {
  return (
    <div className="App">
      <Router>
        <Route path="/teams/:teamName">
          <TeamPage />
        </Route>
      </Router>
    </div>
  ); 
}

export default App;

这是 TeamPage.js

import { React, useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { MatchDetailCard } from "../components/MatchDetailCard";
import { MatchSmallCard } from "../components/MatchSmallCard";

export const TeamPage = () => {

  const [team, setTeam] = useState({ matches: [] });
  const { teamName } = useParams();

  useEffect(
    () => {
      const fetchMatches = async () => {
        const response = await fetch(`http://localhost:8080/api/team/${teamName}`);
        const data = await response.json();
        setTeam(data);
      };
      fetchMatches();
    }, [teamName] //This empty array as a second argument tells: Call useEffect only when something inside change
  );

  if(!team || !team.teamName) {
    return <h1>Team Not Found</h1>
  }

  return (
    <div className="TeamPage">
      <h1>{team.teamName}</h1>

      <MatchDetailCard teamName={team.teamName} match={team.matches[0]} />
      {team.matches.slice(1).map((match) => 
        <MatchSmallCard teamName={team.teamName} match={match} />
      )}
    </div>
  );
};

export default TeamPage;

希望大家能帮帮我！！！

Answer 1

在 react-router-dom@6 中 API 发生了很大变化。 Route 组件必须由 Routes 组件呈现（它就像 v5 Switch) 并且路由组件通过 element 属性呈现，该属性采用 ReactElement、a.k.a。 JSX.

示例：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { TeamPage } from './pages/TeamPage';

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/teams/:teamName" element={<TeamPage />} />
        </Routes>
      </Router>
    </div>
  ); 
}

在使用 react-router-dom 时遇到问题

Having troubles with react-router-dom

javascript

reactjs

react-router

react-router-dom