JavaScript перенаправить на другую JavaScript страницу

Question

У меня есть класс JS, называемый "Ячейка. js", и я хочу перенаправить на другую страницу JS, называемую "Подробно. js", когда пользователь нажимает кнопку. Но я не знаю, как перенаправить и передать переменную одновременно. Я работаю над Pokedex (Список Pokemon), и когда пользователь нажимает на первого Pokemon, который имеет ID = 1, идентификатор должен быть передан на страницу Detail. js, где он показывает более подробную информацию о выбранном Pokemon.

Ячейка. js код =

import React from 'react';
import './Cell.css';
import {ClassDeclaration as pokemon} from "@babel/types";

function Cell({ pokemon }) {
    let id = pokemon.name;
    return (
        <a href={"Detail.js?id= " + id } onclick="passID()">
        <div className="Cell">
            <div className="Cell_img">
                <img src={pokemon.sprites.front_default} alt="" />
            </div>
            <div className="Cell_name">
                {pokemon.name}
            </div>
        </div>
        </a>
    );
}
function passID(){
    return(
        pokemon.id
        );
}
export default Cell;

А вот и цель JS на странице "Деталь. js":

import React, {useState} from 'react';
import './Detail.css';

const queryString = window.location.search;
console.log(queryString);
const urlParams = new URLSearchParams(queryString);
const id = urlParams.get('id');

Detail(id)

function Detail(pokemon) {
    return (
            <div className="Detail">
                <div className="Detail_img">
                    <p>TEST</p>
                </div>
                <div className="Detail_name">
                    {pokemon.name}
                </div>
            </div>
    );
}

async function getPoke(id) {
    console.log(id);
    const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`);
    const json = await res.json();
    console.log(json);
}
export default Detail;

Деталь. js еще не закончено, я могу проверить что угодно, потому что я не знаю, как перенаправить и отправить переменную. Надеюсь, вы можете помочь мне PS: я очень плохо знаком с JS xD

Answer 1

Навигация в React так не будет! React предназначен для одностраничного приложения ( SPA ). ReactDOM.render() загрузит контейнер, в котором можно переключаться между различными представлениями.

Рекомендуется response-router , но вы можете сделать это для экспериментов. Вы можете передать любую информацию в качестве реквизита для просмотра компонента (в вашем случае, id)

import React, { useState } from "react";

const App = () => {
 const [pageNo, setPageNo] = useState(1);
 let id = "Xyz"
 return (
   <div>
     <header>
       <span onClick={() => setPageNo(1)}>View1</span>
       <span onClick={() => setPageNo(2)}>View2</span>
       <span onClick={() => setPageNo(3)}>View3</span>
     </header>

     {loadView(pageNo, id)}
   </div>
 );
};
const loadView = (pageNo, id) => {
 switch (pageNo) {
   case 1:
     return <View1 id={id}/>;
   case 2:
     return <View2 id={id}/>;
   case 3:
     return <View3 id={id}/>;
 }
};

const View1 = ({id}) => <div>View 1 pokeman name = {id}</div>;
const View2 = ({id}) => <div>View 2 pokeman name = {id}</div>;
const View3 = ({id}) => <div>View 3 pokeman name = {id}</div>;

CSS

header {
  border-bottom: 1px solid #c4c4c4;
}
header span {
  margin: 8px;
  cursor: pointer;
  text-decoration: underline;
}