Чего-То Не Хватает При Отправке Реквизита В Ссылку В React

#reactjs #react-router #react-router-dom

Вопрос:

То, Что Я Пытаюсь Сделать:

Создайте список с помощью API, в котором перечислены несколько команд, каждая из которых связана с новой страницей команды через свой идентификатор команды. Пример:

Домашняя страница: Localhost:3000/

Перечисляет несколько вариантов:

 Search By Team
Search By Player

нажмите на Поиск по командам, указав каждую команду Localhost:3000/команды

 Gladiators
Maniacs

Нажмите на локальный хост Maniacs:3000/Маньяки

До сих пор, когда я нажимаю на каждую команду, она ведет меня на страницу 404.

То, Что У Меня Есть Сейчас:

App.js

         <Route path="/teams" component={Teams} exact></Route> 
        <Route exact path='/:teamName' component={EachTeam} />

Standings.js

 import Atlantic from "../components/divisions/Atlantic"
function Standings() {
return (
    <div className="teams-container">
        <Atlantic />
    </div>
)
}
   export default NHLStandings

Altantic.js

 import { Link } from 'react-router-dom';
import { useState, useEffect } from 'react';
function Atlantic() {
const [teams, setTeams] = useState(null);
useEffect(() => {
    getData();

async function getData() {
    const response = await fetch("RANDOM_API);
    const data = await response.json();
    setTeams(data) ;
    }
}, []);


return (
    <div className="container">
        {teams amp;amp; (
            <div className="container">
                <h2>Atlantic Division</h2>
            {teams['teams'].map((team, index) => (
                (team.division.name === "Atlantic" amp;amp; (
                    <Link 
                        to={`/${team.teamName}`} 
                        teamName={team.teamName}
                        key={index} 
                        className="team-container"
                    >
                        <h2>{team.name}</h2>
                    </Link>
                ))
            ))}
        </div>
    )}
    </div>
)
}

экспорт по умолчанию Атлантический

EachTeam.js

 import { Link } from 'react-router-dom';
import { useState, useEffect, useSelector } from 'react';

function EachTeam(props) {


 return (
    <div className="container">
        <h1>{props.teamName}</h1>
    </div>
)
}
export default EachTeam

Приношу извинения за длинноту, я не хотел ничего опускать. Заранее спасибо за любую помощь.

1. Если я не ошибаюсь — вы не должны использовать exact во втором маршруте

2. К сожалению, это не помогло. URL-адрес по — прежнему обновляется динамически, и никакая информация не передается.

Ответ №1:

teamName не является допустимой опорой ни Link для компонента, ни Route для компонента. Посторонние реквизиты игнорируются. Я подозреваю, что вы правильно ориентируетесь и просто видите props.teamName , что не определено.

 {teams['teams'].map((team, index) => (
  (team.division.name === "Atlantic" amp;amp; (
    <Link 
      to={`/${team.teamName}`} 
      teamName={team.teamName} // <-- ignored, not a Link prop
      key={index} 
      className="team-container"
    >
      <h2>{team.name}</h2>
    </Link>
  ))
))}

Для решения вы можете получить доступ к параметрам соответствия маршрута, чтобы получить teamName . В компонентах функций используйте крючок реакции useParams.

Дано:

 <Route exact path='/:teamName' component={EachTeam} />

Каждая команда

 import { useParams } from 'react-router-dom';

function EachTeam(props) {
  const { teamname } = useParams();

  return (
    <div className="container">
      <h1>{teamName}</h1>
    </div>
  )
}