React Router Получить props.match.params для элементов без категории

Question

Помогите, пожалуйста, разобраться как происходит передача данных для компонентов списка ? Как для карточки получить именно, те данные которые к ней относятся ? Вот упрощённый пример

import { NavLink, withRouter } from "react-router-dom";

const GamePage = withRouter((props) => {
  const { games } = props;

  // const game = props.games.get(props.match.params.gameUrl);
  //  console.log("game = ", game);

  // TODO Переделать... тут всегда отдаеться первая запись а надо правильно
  const first = games[0];
  const gameData = {
    gameName: first.gameName,
    gameSeo: first.gameSeo,
    gameAdded: first.gameAdded
  };

  // const id = props.match.params.id;

  return (
    <div className="game_block">
      <h1 className="game_name">{gameData.gameName}</h1>
      <p className="game_description">{gameData.gameSeo}</p>
      <p className="game_gameAdded">{gameData.gameAdded}</p>
      <NavLink to="/">HOME</NavLink>
    </div>
  );
});

export default GamePage;

Как происходит матчинг именно нужных данных ? Почему в примерах всегда приводят матчинг по id параметру?(Если я правильно понял, то там же просто, этот параметр должен быть уникальным в приделах объекта)

Answer 1

Я бы посоветовал вам провести рефакторинг Route и использовать gameId в url-params:

<Switch>
  <Route exact path="/">
    <HomePage games={this.state.games} />
  </Route>
  <Route path="/:gameId">
    <GamePage games={this.state.games} />
  </Route>
  <Route component={NoPageFound} />
</Switch>

Затем используйте find, чтобы найти currentGame, как показано ниже:

const GamePage = withRouter((props) => {
  const { games, match } = props;
  const gameId = match.params.gameId;

  const currentGame = games.find((game) => String(game.id) === String(gameId));

  const gameData = {
    gameName: currentGame.gameName,
    gameSeo: currentGame.gameSeo,
    gameAdded: currentGame.gameAdded
  };

  return (
    <div className="game_block">
      <h1 className="game_name">{gameData.gameName}</h1>
      <p className="game_description">{gameData.gameSeo}</p>
      <p className="game_gameAdded">{gameData.gameAdded}</p>
      <NavLink to="/">HOME</NavLink>
    </div>
  );
});

Редактировать:

Если вы хотите использовать gameUrl:

App.js:

<Route exact path="/:gameUrl">
  <GamePage games={this.state.games} />
</Route>

и

GamePage.js:

// ..
const gameUrl = match.params.gameUrl;
const currentGame = games.find((game) => game.gameUrl === gameUrl + "/");
// ...

БЛОГ НА HUSL

React Router Получить props.match.params для элементов без категории

Ответы (1 шт):