在 reactJs 中提交表单后如何进入下一页答案

【问题标题】：How can I move onto the next page after submiting the form in reactJs在 reactJs 中提交表单后如何进入下一页
【发布时间】：2022-02-05 16:18:51
【问题描述】：

在 reactJs 中提交表单后如何进入下一页。每当我提交表单时，数据都会存储在我的 firebase 数据库中，但提交表单后我无法转到下一页。我正在使用反应路由器，但我不明白它有什么问题，而且我在控制台中收到两个警告。

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import "./contactForm.css";

function ContactForm() {
  const navigate = useNavigate();
  const [userData, setUserData] = useState({
    name: "",
    email: "",
    tel: "",
  });

  let name, value;
  const getData = (e) => {
    name = e.target.name;
    value = e.target.value;
    setUserData({ ...userData, [name]: value });
  };

  const submitPost = async (e) => {
    e.preventDefault();
    const { name, email, tel } = userData;
    const response = await fetch(
      "https://reactform-4bea0-default-rtdb.firebaseio.com/reactForm.json",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name,
          email,
          tel,
        }),
      }
    );

    if (response) {
      setUserData({
        name: "",
        email: "",
        tel: "",
      });
      alert("Your Data has been stored in our Database");
      navigate('/showdata')
    }
  };

  return (
    <div>
      <h1>Fill In the form</h1>
      <div>
        <form method="POST" onSubmit={submitPost}>
          <input
            type="name"
            name="name"
            id="name"
            value={userData.name}
            onChange={getData} 
          />
          <input
            type="email"
            name="email"
            id="email"
            value={userData.email}
            onChange={getData} 
          />
          <input
            type="tel"
            name="tel"
            id="tel"
            value={userData.tel}
            onChange={getData}
          />
          <button type="submit">Submit</button>
        </form>
      </div>
    </div>
  );
}

export default ContactForm;

这是我使用路由的 App.js 文件的代码

import './App.css';
import ContactForm from './component/ContactForm';
import ShowData from './component/ShowData';
import {Routes} from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <ContactForm/>
      <Routes path="/showdata" element={<ShowData/>} />
    </div>
  );
}

export default App;

【问题讨论】：

警告是说没有任何路线匹配您正在导航的位置。您能否更新您的问题以包含相关的路由代码？
<Routes> <Route path="/showdata" element={<ShowData/>}/> </Routes> 在Routes 标签内定义Route
Routes 组件只处理渲染Route 组件。我没有看到路由器或正确使用的路由。
中的内容向显示。我只想通过单击中的按钮移动到页面
那么你需要为它渲染一个路由，就像@MuhammadBilalBangash 的评论一样。

标签： javascript reactjs firebase firebase-realtime-database react-router

【解决方案1】：

App 组件缺少一个路由器和路由来呈现您尝试导航到的ShowData 组件。

路由器，例如BrowserRouter 为所有 Link、Routes、Route、Navigate 组件和所有各种 RRD React 挂钩为应用程序提供路由上下文。
Routes 是对 URL 进行路由路径匹配的组件。所有Route 组件都需要渲染为一个，才能使路由路径匹配工作。
Route 是指定要匹配的 path 和要渲染的组件的组件。

示例代码

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Routes>
          <Routes path="/" element={<ContactForm />} />
          <Route path="/showdata" element={<ShowData />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

请注意，我还将ContactForm 组件移动到“home”"/" 路径上的路由中，以修复关于没有匹配“/”的路由的第一个警告。

【讨论】：