如何在Switch语句中使用React Router Dom实现页面跳转？

你不能在JavaScript逻辑里直接用<Link>组件，因为它属于React元素，必须放在JSX渲染区域使用。要在switch这类逻辑代码里实现页面跳转，得用编程式导航，React Router v6+里用useNavigate钩子就能解决，具体步骤如下：

• 先从react-router-dom导入useNavigate钩子
• 在组件内部调用useNavigate获取导航函数
• 在switch的case分支里，调用这个导航函数完成跳转

修改后的完整代码示例：

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

const App = () => {
  // 获取导航函数
  const navigate = useNavigate();

  const input_command_logic = (e) => {
    e.preventDefault();
    switch (real_input_value()) {
      case 'Help':
        console.log('Displaying list of available commands');
        user_input_resultsHelp();
        // 调用导航函数触发跳转
        navigate('/');
        break;
      // 其他case分支可按需添加
    }
  };

  return (
    // 示例表单结构，根据你的实际需求调整
    <form onSubmit={input_command_logic}>
      {/* 表单输入元素 */}
      <button type="submit">提交</button>
    </form>
  );
};

说明：

• useNavigate是React Router专门提供的编程式导航钩子，能在函数组件的逻辑代码里触发页面跳转
• 调用navigate('/')的效果和点击<Link to="/">完全一致，但它可以在事件处理、switch判断这类逻辑场景中使用

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