React中通过react-router-dom获取URL参数以获取对应BeerItem数据

嗨，针对你的需求，我给你整理了两种主流版本（react-router-dom v5 和 v6）的实现方案，都是项目里常用的方法：

一、如果你用的是 react-router-dom v6（当前主流版本） #

v6里官方推荐使用useParams钩子来捕获URL中的参数，步骤很清晰：

1. 先配置路由规则
   你需要在路由配置里给参数定义占位符，把路由写成这样：

   <Route path="/beerItem/:beerName" element={<BeerDetail />} />
   

   这里的:beerName就是对应URL末尾newName的占位符，名字可以根据你的需求自定义，只要前后对应上就行。

2. 在详情组件（BeerDetail）中获取参数
   直接导入useParams钩子，就能轻松拿到对应的参数：

   import { useParams, useEffect } from 'react-router-dom';
   
   function BeerDetail() {
     const { beerName } = useParams();
     // 现在你就可以用beerName去请求后端数据了
     console.log('当前要查询的啤酒名称:', beerName); // 输出就是URL里的newName
   
     // 这里可以写请求后端的逻辑，比如：
     useEffect(() => {
       fetch(`/api/beers/${beerName}`)
         .then(res => res.json())
         .then(data => {
           // 处理获取到的BeerItem数据，比如存到状态里
         });
     }, [beerName]); // 依赖beerName，名称变化时重新请求
   
     return (
       // 你的详情组件UI内容
     );
   }
   

二、如果你用的是 react-router-dom v5 #

v5的话有两种常用的获取方式：

方式1：使用useParams钩子（v5.1及以上版本支持） #

和v6的用法类似，先配置路由：

<Route path="/beerItem/:beerName" component={BeerDetail} />

然后在组件里：

import { useParams } from 'react-router-dom';

function BeerDetail() {
  const { beerName } = useParams();
  // 用beerName去请求后端数据即可
  return <div>当前啤酒名称：{beerName}</div>;
}

方式2：通过组件props获取（适合类组件） #

如果你的详情组件是类组件，或者不想用钩子，可以通过props的match对象来获取参数：

import React from 'react';

class BeerDetail extends React.Component {
  componentDidMount() {
    const { beerName } = this.props.match.params;
    // 在这里用beerName请求后端数据
    console.log('要查询的啤酒名称:', beerName);
  }

  render() {
    const { beerName } = this.props.match.params;
    return <div>当前啤酒名称：{beerName}</div>;
  }
}

额外小提示 #

如果你的item.name里包含特殊字符（比如空格、斜杠、中文等），建议在跳转前用encodeURIComponent编码，获取参数时再用decodeURIComponent解码，避免URL出现异常：

// 跳转时编码
const selectedBeerID = '/beerItem/' + encodeURIComponent(this.props.beers.selectedBeerItem.name);
return <Redirect to={selectedBeerID}/>;

// 获取时解码（以v6为例）
const { beerName } = useParams();
const decodedName = decodeURIComponent(beerName);

内容的提问来源于stack exchange，提问作者Dave_888