react-router-dom页面导航问题：提交成功后跳转报错

我正在实现提交流程成功（布尔标志submitted变为true）后跳转到确认页的功能，但使用react-router-dom库的导航方法时遇到错误。

相关代码 #

import React, { useState } from 'react';
import axios from 'axios';
import { auth } from './firebase';
import { Link, Routes, Route, Navigate } from 'react-router-dom';
import './mainpage.css';
import './Confirmation';

const Mainpage = () => {
  const apiKey = '******';
  const baseId = '***********';
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phoneNumber: '',
  });

  const [submitted, setSubmitted] = useState(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const response = await axios.post(
        `https://api.airtable.com/v0/${baseId}/Users`,
        {
          records: [
            {
              fields: {
                name: formData.name,
                email: formData.email,
                phoneNumber: auth.currentUser.phoneNumber,
                address: formData.address,
                location: formData.location,
                fssai: formData.fssai,
                ResturantName: formData.ResturantName,
                Password: formData.Password,
              },
            },
          ],
        },
        {
          headers: {
            Authorization: `Bearer ${apiKey}`,
            'Content-Type': 'application/json',
          },
        }
      );

      console.log('Data sent to Airtable:', response.data);
      
      setSubmitted(true);
    } catch (error) {
      console.error('Error sending data to Airtable:', error);
    }  
  };

  if(submitted = true){
    Navigate('./Confermation');
  }

  const logout = () => {
    auth.signOut();
  };

  return (
    <div className="main-container">
      <center>
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label htmlFor="name">Enter your Full Name:</label>
            <input
              {/* 剩余代码省略 */}
        </form>
      </center>
    </div>
  );
};

export default Mainpage;

错误原因及修复方案 #

1. 赋值运算符误用

条件判断里的if(submitted = true)是赋值操作，会直接把submitted设为true，应该改为if(submitted)或者if(submitted === true)。

2. Navigate组件使用错误

Navigate是React组件，不能直接在函数体中调用，必须在JSX中渲染，或者使用useNavigate钩子进行编程式导航（推荐）。

3. 组件导入错误

import './Confirmation';仅导入文件，未导入组件，应改为import Confirmation from './Confirmation';（假设Confirmation是默认导出组件）。

4. 路径拼写错误

导航路径./Confermation拼写错误，需与组件名一致，建议使用绝对路径如/confirmation（需配合路由配置）。

修复后的代码示例 #

方式一：使用useNavigate编程式导航（推荐）

import React, { useState } from 'react';
import axios from 'axios';
import { auth } from './firebase';
import { Link, Routes, Route, useNavigate } from 'react-router-dom'; // 导入useNavigate
import './mainpage.css';
import Confirmation from './Confirmation'; // 正确导入组件

const Mainpage = () => {
  const navigate = useNavigate(); // 获取导航函数
  const apiKey = '******';
  const baseId = '***********';
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phoneNumber: '',
    address: '', // 补充初始state缺失字段
    location: '',
    fssai: '',
    ResturantName: '',
    Password: '',
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const response = await axios.post(
        `https://api.airtable.com/v0/${baseId}/Users`,
        {
          records: [
            {
              fields: {
                name: formData.name,
                email: formData.email,
                phoneNumber: auth.currentUser.phoneNumber,
                address: formData.address,
                location: formData.location,
                fssai: formData.fssai,
                ResturantName: formData.ResturantName,
                Password: formData.Password,
              },
            },
          ],
        },
        {
          headers: {
            Authorization: `Bearer ${apiKey}`,
            'Content-Type': 'application/json',
          },
        }
      );

      console.log('Data sent to Airtable:', response.data);
      
      // 提交成功后直接导航到确认页
      navigate('/confirmation', { replace: true }); // replace防止用户后退回到表单
    } catch (error) {
      console.error('Error sending data to Airtable:', error);
    }  
  };

  const logout = () => {
    auth.signOut();
  };

  return (
    <div className="main-container">
      <center>
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label htmlFor="name">Enter your Full Name:</label>
            <input
              {/* 剩余代码保留 */}
        </form>
      </center>
    </div>
  );
};

export default Mainpage;

方式二：条件渲染Navigate组件

若坚持用状态判断渲染，替换原if语句：

if(submitted) {
  return <Navigate to="/confirmation" replace />;
}

路由配置注意事项 #

确保在路由根组件（如App.js）中配置确认页路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Mainpage from './Mainpage';
import Confirmation from './Confirmation';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Mainpage />} />
        <Route path="/confirmation" element={<Confirmation />} />
        {/* 其他路由 */}
      </Routes>
    </Router>
  );
}

export default App;

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