Reactjs 在React中使用url中的id打开特定数据

我正在尝试打开新页面，当用户单击“阅读更多”按钮时，该页面将显示更多数据的详细信息

这是显示在主页中的组件，当用户单击它时，会出现“阅读更多”按钮，它会打开一个包含此组件更多详细信息的新页面

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

export default function Code(props) {

  const {desc, type, id } = props;
    return (
        <>
          <div className='box'>
            <h2 className='is-size-4'>{desc}</h2>
            <div className='detail'>
              <Link to={`code/${id}`} className='button btn'>
                <i className='fas fa-chevron-right'></i> &nbsp; Read More
              </Link>
              <div className='is-size-6 has-text-weight-medium tag'>Type: {type}</div>
            </div>
          </div>
        </>
    )
}

从“React”导入React；
进口{
链接
}从“反应路由器dom”；
导出默认功能代码（道具）{
const{desc，type，id}=props；
返回(
{desc}
阅读更多
类型：{Type}
)
}

这是URL“http://localhost:3000/code/1"

我添加了一些静态数据，只是为了UI

import React, { useContext } from 'react';
import Navbar1 from '../layouts/navbar1';
import { GlobalContext } from '../context/StateManager';

export default function CodeDetail() {
    const { deleteCode } = useContext(GlobalContext);

    return (
        <div>
            <Navbar1/>
            <div className='section'>
                <div className='container'>
                    <div className='box'>
                        <div className='title'>Grapes</div>
                        <pre>
                            font-family: Consolas,"courier new";
                            color: crimson;
                            background-color: #f1f1f1;
                            padding: 2px;
                            font-size: 105%;
                        </pre>
                        <div className='del-edit'>
                            <div className='button is-danger' onClick={deleteCode}>Delete</div>
                            <div className='button is-warning'>Edit</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

import React，{useContext}来自“React”；
从“../layouts/Navbar1”导入Navbar1；
从“../context/StateManager”导入{GlobalContext}；
导出默认函数CodeDetail（）{
const{deleteCode}=useContext（GlobalContext）；
返回(
葡萄
字体系列：Consolas，“courier new”；
颜色：深红色；
背景色：#f1f1；
填充：2px；
字体大小：105%；
删除
编辑
)
}

您需要像下面的代码片段一样配置路由

<Route path="/code/:id" render={(props) => <CodeDetail {...props} data={someSliceOfState}} /> } />

如果要将道具传递给组件，请尝试使用“渲染”方法

}/>

您需要像下面的代码片段一样配置路由

<Route path="/code/:id" render={(props) => <CodeDetail {...props} data={someSliceOfState}} /> } />

如果要将道具传递给组件，请尝试使用“渲染”方法

}/>

是的，我在App.js中也这样做了，页面将以静态数据打开，但我不知道如何从state传输特定数据，根据idIt，看起来您的代码组件正在接收

id

作为道具。是的，我在App.js中也这样做了，页面以静态数据打开，但我不知道如何从state传输特定数据，根据idIt，看起来您的代码组件正在接收id作为道具。