React对接Django后端时如何通过axios获取URL中的查询参数quiz_id

以下两种方案均可以提取http://localhost:3000/attempt/?quiz_id=6中的quiz_id参数值：

方案1：基于react-router v6实现（项目集成react-router时优先用） #

直接调用react-router内置的useSearchParams钩子即可：

import { useSearchParams } from 'react-router-dom';
import { useEffect } from 'react';
import axios from 'axios';

function AttemptPage() {
  const [searchParams] = useSearchParams();
  // 获取quiz_id参数，参数不存在时返回null
  const quizId = searchParams.get('quiz_id');

  useEffect(() => {
    if (quizId) {
      // 拿到参数后请求Django后端接口
      const fetchQuizData = async () => {
        try {
          const response = await axios.get('替换为你的Django接口地址', {
            params: { quiz_id: quizId }
          });
          // 处理接口返回的业务逻辑
        } catch (error) {
          console.error('接口请求失败:', error);
        }
      }
      fetchQuizData();
    }
  }, [quizId]);

  return <div>测验页面</div>;
}

export default AttemptPage;

方案2：无路由依赖，原生浏览器API实现 #

如果项目未集成react-router，直接使用URLSearchParams原生API读取地址栏参数：

import { useEffect, useState } from 'react';
import axios from 'axios';

function AttemptPage() {
  const [quizId, setQuizId] = useState(null);

  useEffect(() => {
    const searchParams = new URLSearchParams(window.location.search);
    const currentQuizId = searchParams.get('quiz_id');
    setQuizId(currentQuizId);

    if (currentQuizId) {
      const fetchQuizData = async () => {
        try {
          const response = await axios.get('替换为你的Django接口地址', {
            params: { quiz_id: currentQuizId }
          });
          // 处理接口返回的业务逻辑
        } catch (error) {
          console.error('接口请求失败:', error);
        }
      }
      fetchQuizData();
    }
  }, []);

  return <div>测验页面</div>;
}

export default AttemptPage;

补充说明：如果需要获取多个同名的查询参数，可以调用getAll()方法替换get()方法，返回值为参数值组成的数组。

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