JavaScript重定向至另一个JavaScript页面

Question

我有一个名为"Cell.js“的JS类，当用户单击一个按钮时，我想重定向到另一个名为"Detail.js”的JS页面。但我不知道如何同时重定向和传递变量。我正在做一个Pokedex (精灵宝可梦列表)，当用户点击f.e.第一个小精灵的ID = 1，ID应该传递到Detail.js页面，在那里它显示所选小精灵的更多详细信息。

Cell.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的目标页面"Detail.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;

Detail.js还没有完成，我可以测试任何东西，因为我不知道如何重定向和发送变量。希望你能帮助我PS:我是JS xD的新手

Answer 1

React中的导航将不会以这种方式发生！React适用于单页面应用程序(SPA)。ReactDOM.render()会加载容器，在容器中可以切换不同的视图。

推荐使用react-router，但您也可以在实验中使用此方法。您可以将任何信息作为props传递给view组件(在本例中为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;
}