Question

我有一个名为“ Cell.js”的JS类，当用户单击按钮时，我想重定向到另一个名为“ Detail.js”的JS页面。但是我不知道如何同时重定向和传递变量。我正在研究Pokedex（Pokemon列表），并且当用户单击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，但是您可以通过这种方式进行实验。您可以传递任何信息作为道具来查看组件（在您的情况下为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;
}

JavaScript重定向到另一个JavaScript页面

1 个答案: