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

【问题标题】：Open Specific data using id in url in React在 React 中使用 url 中的 id 打开特定数据
【发布时间】：2020-07-12 15:19:55
【问题描述】：

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

这是显示在主页上的组件，当用户点击它时，有一个阅读更多按钮，它会打开一个新页面，其中包含该组件的更多详细信息。

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>
        </>
    )
}

这是网址“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>
    )
}

【问题讨论】：

标签： reactjs react-hooks react-context

【解决方案1】：

您需要配置类似于以下 sn-p 的路由

<Switch>
      <Route path="/" exact component={Home} />
      <Route path="/code/:id"  component={CodeDetail} />
    </Switch>

如果你想将 props 传递给组件，请尝试使用 render 方法

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

【讨论】：

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