【发布时间】：2020-03-12 03:53:53
【问题描述】：
我正在尝试使用react-router-dom，但我遇到了困难，即使花了将近 1 个小时。
我已经检查了 reacttraining 的文档，但我很惭愧地说我仍然没有掌握这个概念。
其中一个令人困惑的方面是存在BrowserRouter、Route、Link、Switch。这么多，每个人都做什么？另外，您必须在Route 中包装一些代码，在Switch 中包装一些其他代码等等。一切都那么混乱。
这是我已有的代码：
import React, { useState } from "react";
import "./styles.css";
import AddPlayer from "./Components/AddPlayer";
import DisplayPlayers from "./Components/DisplayPlayers";
import EditPlayer from "./Components/EditPlayer";
import FilteredPlayers from "./Components/FilteredPlayers";
const App = () => {
const [showAll, setShowAll] = useState(true);
const [filteredText, setFilteredText] = useState("");
const [editing, setEditing] = useState(false);
const [playerToEdit, setPlayerToEdit] = useState();
const [players, setPlayers] = useState([
{ id: 1, name: "Cristiano Ronaldo", club: "Juventus", important: true },
{ id: 2, name: "Lionel Messi", club: "Barcelona", important: false },
{ id: 3, name: "Kaka", club: "AC Milan", important: true },
{ id: 4, name: "Ronaldinho", club: "Barcelona", important: true },
{ id: 5, name: "Deco", club: "Barcelona", important: false },
{ id: 6, name: "Sergio Aguero", club: "Manchester City", important: false },
{ id: 7, name: "Frank Lampard", club: "Chelsea", important: true },
{
id: 8,
name: "Son Heung Min",
club: "Tottenham Hotspur",
important: true
},
{
id: 9,
name: "Michael Carrick",
club: "Manchester United",
important: false
},
{ id: 10, name: "Paolo Dybala", club: "Juventus", important: false }
]);
const addPlayer = obj => {
obj.id = players.length + 1;
const temp = [...players, obj];
setPlayers(temp);
};
const deletePlayer = id => {
let i = 0;
const temp = [...players];
temp.forEach((el, a) => {
if (el.id === id) i = a;
});
temp.splice(i, 1);
setPlayers(temp);
};
const whichPlayer = obj => {
setEditing(true);
setPlayerToEdit(obj);
};
const editPlayer = (id, obj) => {
const temp = [...players];
setPlayers(temp.map(player => (player.id === id ? obj : player)));
setEditing(false);
};
const toggle = id => {
let i = 0;
const temp = [...players];
temp.forEach((el, a) => {
if (el.id === id) i = a;
});
temp[i].important = !temp[i].important;
setPlayers(temp);
};
let toShow = showAll ? players : players.filter(player => player.important);
return (
<div className="App">
<header>Soccer database</header>
<h2>Filter by name</h2>
<input
placeholder="Filter by name"
onChange={e => setFilteredText(e.target.value)}
value={filteredText}
/>
<button onClick={() => setFilteredText("")}>Clear filter</button>
{editing ? (
<EditPlayer
editPlayer={editPlayer}
setEditing={setEditing}
playerToEdit={playerToEdit}
setFilteredText={setFilteredText}
/>
) : (
<AddPlayer addPlayer={addPlayer} />
)}
{filteredText.length > 0 ? (
<FilteredPlayers
toShow={toShow}
filteredText={filteredText}
whichPlayer={whichPlayer}
deletePlayer={deletePlayer}
setShowAll={setShowAll}
showAll={showAll}
toggle={toggle}
/>
) : (
<DisplayPlayers
whichPlayer={whichPlayer}
deletePlayer={deletePlayer}
toShow={toShow}
setShowAll={setShowAll}
showAll={showAll}
toggle={toggle}
/>
)}
</div>
);
};
export default App;
如您所见，App 的返回部分已经很拥挤，我应该如何以及将所有react-router 的东西放在哪里？基本上，我的应用程序所做的是显示一个表格，每一行代表每个足球运动员。我希望能够单击一个名称，然后转到一个单独的组件，该组件显示有关该特定玩家的更多信息。如果您需要其余代码来帮助我，请告诉我。
感谢大家的宝贵时间！
【问题讨论】：
标签： reactjs react-router react-router-dom