时间戳

首页 > 解决方案 > 在 React 中使用 url 中的 id 打开特定数据

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

问题描述

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

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

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

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

标签： reactjsreact-hooksreact-context

解决方案

您需要配置类似于以下代码段的路线

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

推荐阅读