Я пытаюсь использовать react-router-dom, и у меня возникают трудности, даже после того, как я потратил на это почти 1 час.
Я проверил документы на повторную подготовку, но мне стыдно сказать, что я до сих пор этого не делаю гр asp концепция.
Одним из запутанных аспектов является тот факт, что существует 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? По сути, мое приложение отображает таблицу, в которой каждая строка представляет каждого футболиста. Я хочу иметь возможность щелкнуть имя и go для отдельного компонента, который отображает дополнительную информацию об этом конкретном c проигрывателе. Если вам понадобится остальная часть кода, чтобы помочь мне, пожалуйста, дайте мне знать.
Спасибо всем за ваше время!