React组件props.location为undefined 无法获取URL查询参数问题求助

问题原因 #

这个问题既不是路由没有配置查询参数导致的，也和localhost开发模式无关，是代码写法错误导致的：

• 查询参数不需要提前在路由规则中声明，任意合法的查询参数都可以直接读取
• match是react-router中用于存储路由路径匹配结果的对象，仅包含params、path、url、isExact四个属性，本身不存在location属性，你从match里读location必然得到undefined或null
• 即便正确拿到location对象，也需要把location.search（就是URL中?开头的查询字符串部分）传入URLSearchParams构造函数，不能直接传入整个location对象

解决方案 #

根据你使用的react-router版本选择对应写法：

1. react-router v5 版本

修改组件参数解构，单独取出location属性，调整参数读取逻辑：

// 组件入参增加location
const ProductScreen = ({ match, location }) => {
  const [product, setProduct] = useState({});

  useEffect(() => {
    // 正确读取sound参数
    const sound = new URLSearchParams(location.search).get('sound');
    console.log('sound参数值：', sound);
    console.log(`location是 ${location}`);
    console.log('about to fetch product');
    // 剩下的原有逻辑不变
    const fetchProduct = async () => {
      console.log('id参数值：', match.params.id);
      const { data } = await axios.get(`http://localhost:5000/api/products/${match.params.id}`);
      setProduct(data);
    };
    fetchProduct();
    // 原有socket逻辑不变
  }, [match, location]);
  // 原有渲染逻辑不变
}

2. react-router v6 版本

v6已经不再通过组件props传递match、location，需要使用官方提供的hook读取参数：

// 导入需要的hook
import { useParams, useSearchParams } from 'react-router-dom';

const ProductScreen = () => {
  // 读取路由路径参数id，替代原来的match.params.id
  const { id } = useParams();
  // 读取查询参数
  const [searchParams] = useSearchParams();
  const sound = searchParams.get('sound');

  const [product, setProduct] = useState({});

  useEffect(() => {
    console.log('sound参数值：', sound);
    const fetchProduct = async () => {
      console.log('id参数值：', id);
      const { data } = await axios.get(`http://localhost:5000/api/products/${id}`);
      setProduct(data);
    };
    fetchProduct();
    // 原有socket逻辑不变
  }, [id, sound]);
  // 原有渲染逻辑不变
}

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