React路由跳转时向CreateMember组件传递参数的实现方法

针对你的场景，下面提供两种可行的实现方式，同时修正现有代码中的问题：

方案一：使用路由state参数（参数不显示在URL中） #

1. 修改Members.jsx的跳转逻辑 #

引入useNavigate钩子，替换原生href跳转，同时携带参数：

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

const showMembers = () => {
   const [state, setState] = useState('create');
   const navigate = useNavigate();

   const handleEdit = () => {
     const newState = 'edit';
     setState(newState);
     // 跳转时携带mode和id参数到路由state中
     navigate('/CreateMember', {
       state: {
         mode: newState,
         id: 4
       }
     });
   };

   return (
     // ...其他代码
     <Button onClick={handleEdit}>Edit</Button>
     // ...其他代码
   )
}

2. 修改Content组件获取路由参数并传递 #

引入useLocation钩子获取路由state，再传递给CreateMember组件：

import { useLocation } from 'react-router-dom';
import CreateMember from './CreateMember'; // 请根据实际路径调整

const Content = () => {
    const URL = window.location.pathname.split('/')[1];
    const location = useLocation();

    const renderPage = (url) => {
        switch (url) {
            case 'CreateMember':
                // 从路由state中取出参数，传递给组件
                const { mode, id } = location.state || {};
                return <CreateMember mode={mode} id={id} />;
            // ...其他case
            default:
                return <PageNotFound />;
        }
    }

    return renderPage(URL);
}

3. 修改CreateMember组件接收参数 #

通过props接收传递过来的参数，并执行对应逻辑：

import { useEffect } from 'react';

const CreateMember = ({ mode, id }) => {
  useEffect(() => {
    if (mode === 'edit' && id) {
      fetch('/api/getMemberByID', {
        method: 'post',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id })
      })
      .then(res => res.json())
      .then(data => {
        // 处理接口返回的数据，比如填充表单等
      })
      .catch(err => console.error('获取成员信息失败:', err));
    }
  }, [mode, id]);

  // ...其他逻辑
  return (
    // ...组件内容
  )
}

方案二：使用URL查询参数（参数显示在URL中，刷新不丢失） #

如果需要参数在URL中可见且刷新后保留，可采用此方案：

1. 修改Members.jsx的跳转逻辑 #

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

const showMembers = () => {
   const [state, setState] = useState('create');
   const navigate = useNavigate();

   const handleEdit = () => {
     const newState = 'edit';
     setState(newState);
     // 通过查询参数传递mode和id
     navigate(`/CreateMember?mode=${newState}&id=4`);
   };

   return (
     // ...其他代码
     <Button onClick={handleEdit}>Edit</Button>
     // ...其他代码
   )
}

2. 修改Content组件获取查询参数并传递 #

引入useSearchParams钩子获取URL参数：

import { useSearchParams } from 'react-router-dom';
import CreateMember from './CreateMember';

const Content = () => {
    const URL = window.location.pathname.split('/')[1];
    const [searchParams] = useSearchParams();

    const renderPage = (url) => {
        switch (url) {
            case 'CreateMember':
                const mode = searchParams.get('mode');
                const id = searchParams.get('id');
                return <CreateMember mode={mode} id={id} />;
            // ...其他case
            default:
                return <PageNotFound />;
        }
    }

    return renderPage(URL);
}

3. CreateMember组件的用法与方案一一致 #

同样通过props接收mode和id，执行对应逻辑即可。

现有代码的关键问题修正 #

• 原Button的onClick={setState('edit')}会在组件渲染时直接执行，必须用箭头函数包裹成onClick={() => setState('edit')}（或封装成单独函数）。
• 原Content组件中直接调用CreateMember()是错误的，必须使用JSX标签<CreateMember />，否则组件无法正常触发生命周期钩子，也无法正确接收props。

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