在反应中打开具有特定 ID 的页面

Question

我这里有三个页面 (App.js - Button.js - Template.js)
我想要当用户点击 Button.js 中的每个按钮时，Template.js 使用来自 api 的特定数据打开的页面（这里我有一个人工 api 包含对象，每个对象包含有关数字货币的特定信息）当我点击例如比特币按钮时我想要模板页面呈现其中的比特币信息

App.js

import { useState } from "react";
import Button from "./Button";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Template from "./Template";
const api = [
{ id: 1, name: "bitcoin", abbr: "btc" },
{ id: 2, name: "theter", abbr: "ttr" },
{ id: 3, name: "ethereum", abbr: "eth" },
];

export default function App() {
return (
    <BrowserRouter>
        <Routes>
            <Route path="/template" element={<Template data={api}/>} />
            <Route path="/button" element={<Button data={api}/>} />
        </Routes>
    </BrowserRouter>
 );
 }

Button.js

import React from "react";
import { Link } from "react-router-dom";

export default function Button(props) {
console.log(props.data);
return (
    <div>
        {props.data.map((item) => {
            return (
                <Link to={`/template`}>
                    <button btn-id={item.id}> {item.name}deposit</button>
                </Link>
            );
        })}
    </div>
 );
 }

Template.js

import React from "react";

export default function Template({ data }) {
console.log(data);
return (
    <div>
        {/* name */}
        <h1>Lorem.</h1>
        {/* abbr */}
        <span>hasan</span>
        {/* id */}
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore,
            consequatur.
        </p>
    </div>
);
}

Answer 1

我想你想使用 URL 参数。

https://v5.reactrouter.com/web/example/url-params

https://v5.reactrouter.com/web/api/Hooks/useparams

App.js

import { useState } from "react";
import Button from "./Button";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Template from "./Template";
const api = [
{ id: 1, name: "bitcoin", abbr: "btc" },
{ id: 2, name: "theter", abbr: "ttr" },
{ id: 3, name: "ethereum", abbr: "eth" },
];

export default function App() {
return (
    <BrowserRouter>
        <Routes>
            <Route path="/template/:id" element={<Template data={api}/>} />
            <Route path="/button" element={<Button data={api}/>} />
        </Routes>
    </BrowserRouter>
 );
 }

Button.js

import React from "react";
import { Link } from "react-router-dom";

export default function Button(props) {
console.log(props.data);
return (
    <div>
        {props.data.map((item) => {
            return (
                <Link to={`/template/${item.id}`}>
                    <button btn-id={item.id}> {item.name}deposit</button>
                </Link>
            );
        })}
    </div>
 );
 }

Template.js

import React from "react";

export default function Template({ data }) {
console.log(data);

const params = useParams();

const _data = data.find(({id}) => id === params.id)

return (
    <div>
        {/* name */}
        <h1>Lorem.</h1>
        {/* abbr */}
        <span>hasan</span>
        {/* id */}
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore,
            consequatur.
        </p>
    </div>
);
}

在反应中打开具有特定 ID 的页面

open a page with specific id in react

javascript

reactjs

api

react-router

router