javascript - 我想添加一个功能，如果我回答所有 5 个问题，页面应该重定向到另一个 url ( /result ) 以显示结果

Question

我想添加一个功能，如果我回答所有 5 个问题，页面应该重定向到另一个 url ( /result ) 以立即显示结果它只是使用 css 来覆盖问题并在所有 5 个问题都得到回答后显示结果这里是代码：

index.js

import React, { Component } from "react";
import ReactDom from "react-dom";
import "./assets/style.css";
import QuestionBox from "./components/QuestionBox";
import Result from "./components/Result";
import quizService from "./quizService";

class QuizBee extends Component {
  state = {
    questionBank: [],
    score: 0,
    responses: 0,
  };
  getQuestions = () => {
    quizService().then((question) => {
      this.setState({
        questionBank: question,
      });
    });
  };

  computeAnswer = (answer, correctAnswer) => {
    if (answer === correctAnswer) {
      this.setState({
        score: this.state.score + 1,
      });
    }
    this.setState({
      responses: this.state.responses < 5 ? this.state.responses + 1 : 5,
    });
  };

  playAgain = () => {
    this.getQuestions();
    this.setState({
      score: 0,
      responses: 0,
    });
  };

  componentDidMount() {
    this.getQuestions();
  }

  render() {
    return (
      <div className="container">
        <div className="title">QuizBee</div>
        {this.state.questionBank.length > 0 &&
          this.state.responses < 5 &&
          this.state.questionBank.map(
            ({ question, answers, correct, questionId }) => (
              <QuestionBox
                question={question}
                options={answers}
                key={questionId}
                selected={(answer) => this.computeAnswer(answer, correct)}
              />
            )
          )}

        {this.state.responses === 5 ? (
          <Result score={this.state.score} playAgain={this.playAgain} />
        ) : null}
      </div>
    );
  }
}

ReactDom.render(<QuizBee />, document.getElementById("root"));

QuestionBox.js

import React, { useState, useEffect } from "react";

const QuestionBox = ({ question, options, selected }) => {
  const [answer, setAnswer] = useState(options);
  const [disable, setDisable] = useState(false);

  return (
    <div className="questionBox">
      <div className="question">{question}</div>
      {answer.map((text, index) => (
        <button
          key={index}
          disabled={disable}
          className="answerBtn"
          onClick={() => {
            setAnswer([text]);
            selected(text);
            setDisable(true);
          }}
        >
          {text}
        </button>
      ))}
    </div>
  );
};

export default QuestionBox;

结果.js

import React from "react";

const Result = ({ score, playAgain }) => {
  return (
    <div className="score-board">
      <div className="score">You Scored {score} / 5 correct answers! </div>
      <button className="playBtn" onClick={playAgain}>
        Play again!
      </button>
    </div>
  );
};

export default Result;

我希望一旦回答了所有 5 个问题，页面应该重定向到结果页面，而无需单击任何按钮，只需回答所有 5 个问题。我尝试了反应路由器购买无法正确完成我从早上开始就一直在尝试请任何帮助将不胜感激

标签： javascriptreactjs