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

Question

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

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

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

Answer 1

您需要配置类似于以下片段的路由

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

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

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