表單提交后重定向到另一個頁面

Question

提交表單后，我的應用程序沒有將我重定向到/quiz頁面，瀏覽器總是顯示Cannot POST /quiz 。

我的目標是：我需要使用已提交的所有數據從/form頁面重定向到/quiz頁面。 我應該為/quiz添加路線嗎？

前端：

表單.jsx：

  const submit = async (e) => {
    /* e.preventDefault(); */
    await FormService.store(storedata)
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        return err;
      });
  };

  return (
    <div className="container">
      <div className="header">
        <div className="title">
          <h1>Apply for a Position :</h1>
        </div>
      </div>
      <Divider style={{ maxWidth: '1000px', marginLeft: '250px' }} />
      <div id="content">
        <div id="formWrapper">
          <form
            id="msform"
            method="post"
            action="/quiz"
            enctype="multipart/form-data"
          >
            <fieldset id="fieldset3">
              <h2 class="fs-title">
                Please complete the form below for a position with us.
              </h2>
              <h3 class="fs-subtitle">Reference 0001</h3>
              {/* <div class="fs-error"></div> */}

              <div class="wrapper">
                <label for="CV">
                  Upload CV <span>*</span>:
                </label>
                <input
                  type="file"
                  name="myFile"
                  id="cv"
                  onChange={handleCVChange}
                  accept="application/msword, application/pdf, .docx"
                  placeholder="Cover Letter"
                  required
                />

                <label for="coverLetter">Cover Letter :</label>
                <textarea
                  type="text"
                  name="coverLetter"
                  value={storedata.coverLetter}
                  onChange={handleChange}
                  id="coverLetter"
                  placeholder="Your Cover Letter"
                />
              </div>

              <br />
              <input
                type="submit"
                name="submit"
                class="submit action-button"
                value="Submit"
                onClick={submit}
              />
            </fieldset>
          </form>
        </div>
      </div>
    </div>
  );
};

export default Form;

測驗.jsx：

import React, { useState, useContext } from 'react'
import { QuizContext } from '../Helpers/Contexts'
import { Questions } from '../Helpers/QuestionBank'


function Quizz() {
    const { score, setscore, setGameState } = useContext(QuizContext)

    const [currQuestion, setcurrQuestion] = useState(0)   //state de numero de current question: 0/1/2
    const [optionChosen, setoptionChosen] = useState("")  //state de l'option choisi: A ou B ou C ou D

    const nextQuestion = () => {
        if (Questions[currQuestion].answer === optionChosen) {
            setscore(score + 1);
        }
        //alert(score);
        setcurrQuestion(currQuestion + 1);
    }

    const finishQuiz = () => {
        if (Questions[currQuestion].answer === optionChosen) {
            setscore(score + 1);
        }
        setGameState("endScreen")
    }



    return (
        <div className='Quiz'>
            <h1>{Questions[currQuestion].prompt}</h1>
            <div className='options'>
                <button onClick={() => setoptionChosen("A")}>{Questions[currQuestion].optionA}</button>
                <button onClick={() => setoptionChosen("B")}>{Questions[currQuestion].optionB}</button>
                <button onClick={() => setoptionChosen("C")}>{Questions[currQuestion].optionC}</button>
                <button onClick={() => setoptionChosen("D")}>{Questions[currQuestion].optionD}</button>
            </div>
            {currQuestion === Questions.length - 1
                ?
                (
                    <button onClick={finishQuiz}>Finish Quiz</button>
                )
                :
                (
                    <button onClick={nextQuestion}>Next Question</button>
                )}
        </div>
    )
}

export default Quizz

后端：

formRoute.js：

const express = require('express')
const router = express.Router()

const FormController = require('../controllers/FormController')
const upload = require('../Middleware/upload')

router.post('/store', upload.single('cv'), FormController.store)



module.exports = router

表單控制器.js：

const form = require('../models/FormModel')

module.exports = {
    store: (req, res, next) => {
        let candidate = new form({
            coverLetter: req.body.coverLetter,
            cv: req.body.cv
        })
        if (req.file) {
            candidate.cv = req.file.path
        }
        candidate.save()
            .then(response => {
                res.json({
                    success: true,
                    message: 'Candidate added successfully!',
                    data: candidate,
                })
            })
            .catch(error => {
                res.json({
                    success: false,
                    message: 'An error occured!',
                    error: error,
                })
            })
    }
}

src/App.js：

import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './views/Home/Home';
import Formulaire from './views/Form/Formulaire';
import Quiz from './views/Quiz/Quiz';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/form" element={<Formulaire />} />
        <Route path="/quiz" element={<Quiz />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Answer 1

首先將 react-router-dom 安裝到您的項目中

然后從此替換您的 form.jsx

表單.jsx

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

const navigate = useNavigate(); 

const submit = async (e) => {
    /* e.preventDefault(); */
    await FormService.store(storedata)
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        return err;
      });
  };

  function gotoQuiz() {
    navigate('/quiz')
  }

  return (
    <div className="container">
      <div className="header">
        <div className="title">
          <h1>Apply for a Position :</h1>
        </div>
      </div>
      <Divider style={{ maxWidth: '1000px', marginLeft: '250px' }} />
      <div id="content">
        <div id="formWrapper">
          <form
            onSubmit={gotoQuiz}
            id="msform"
            method="post"
            enctype="multipart/form-data"
          >
            <fieldset id="fieldset3">
              <h2 class="fs-title">
                Please complete the form below for a position with us.
              </h2>
              <h3 class="fs-subtitle">Reference 0001</h3>
              {/* <div class="fs-error"></div> */}

              <div class="wrapper">
                <label for="CV">
                  Upload CV <span>*</span>:
                </label>
                <input
                  type="file"
                  name="myFile"
                  id="cv"
                  onChange={handleCVChange}
                  accept="application/msword, application/pdf, .docx"
                  placeholder="Cover Letter"
                  required
                />

                <label for="coverLetter">Cover Letter :</label>
                <textarea
                  type="text"
                  name="coverLetter"
                  value={storedata.coverLetter}
                  onChange={handleChange}
                  id="coverLetter"
                  placeholder="Your Cover Letter"
                />
              </div>

              <br />
              <input
                type="submit"
                name="submit"
                class="submit action-button"
                value="Submit"
                onClick={submit}
              />
            </fieldset>
          </form>
        </div>
      </div>
    </div>
  );
};

export default Form; ````