是一种常见的需求,可以通过以下步骤实现:
下面是一个示例代码:
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
const App = () => {
return (
<Router>
<Route path="/example/:id" component={ExampleComponent} />
</Router>
);
};
const ExampleComponent = (props) => {
const { id } = props.match.params;
return (
<div>
<h1>URL参数示例</h1>
<p>参数值: {id}</p>
</div>
);
};
export default App;
在上面的示例中,我们定义了一个名为ExampleComponent的组件,并在路由配置中指定了参数名为id。在ExampleComponent组件中,我们通过props.match.params来获取URL参数的值,并将其渲染到页面上。
这样,当访问/example/123
时,页面将显示"参数值: 123"。
推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云函数(SCF)。
更多关于腾讯云服务器和腾讯云函数的详细信息,请访问以下链接:
领取专属 10元无门槛券
手把手带您无忧上云