react 地址栏传递参数

在React中，有多种方法可以通过地址栏传递参数。其中一种方法是使用params参数。在路由链接中，可以使用`<Link>`组件将参数传递给目标页面，例如：

<Link to="/production/123">跳转到产品页面</Link>

在Route组件中，需要配置参数名称，例如：

<Route path="/production/:productionId" component={production} />

在目标页面（production组件）中，可以通过this.props.match.params来获取传递的参数，例如：

const { productionId } = this.props.match.params;

另一种方法是使用state参数。在路由链接中，可以使用`<Link>`组件将参数传递给目标页面，例如：

<Link to={{ pathname: '/list', state: { name: 'xlf' } }}>跳转到列表页面</Link>

在目标页面中，可以通过this.props.location.state来获取传递的参数，例如：

console.log(this.props.location.state.name); // 输出传递过来的name参数

还有其他的传递参数的方法，如search参数和query参数。但是需要注意，这些方法有一些限制，例如只能传递字符串，不能传递对象，并且参数过多可能导致URL过长。另外，在使用HashRouter时，刷新地址栏会导致参数丢失，而BrowserRouter则不会丢失参数。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [React 路由传参的三种方式](https://blog.csdn.net/weixin_42332641/article/details/125374675)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [react页面跳转带参数](https://blog.csdn.net/weixin_54368936/article/details/122452871)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [react路由传递参数的几种方法](https://blog.csdn.net/Dax1_/article/details/126445502)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]