在ReactJS onClick（）中导航到不同的视图/屏幕

Question

我正在尝试为我的ReactJS trivia应用程序创建三个屏幕或视图。 在onClick()事件之后，琐事应用程序使用API​​，然后处理该响应的数据：

1. /home onClick() =重定向到/ quiz
2. /quiz
3. /results结果显示的结果和'Try Again' button重定向到/home

所需的应用程序流程：我想在/home屏幕上启动。 单击/home屏幕的'Begin' button ，用户将被重定向到/quiz测验开始向用户显示固定数量的问题，一次一次。 回答完所有问题后，将有一个重定向/路由到/results屏幕。 在这里，将向用户显示他们的分数以及正确/不正确的问题的完整列表。 单击的'Try Again' button重定向到/home并重新启动测验应用程序。

在这一点上，我已经研究了几种可能的方法，但是似乎没有什么是我想要的。 没有那些导航链接，react-router似乎无法导航。
https://reacttraining.com/react-router/web/guides/quick-start
https://reactjs.org/docs/handling-events.html

这是API调用ComponentDidMount()其后是一系列问题（如我希望/results出现：
https://codesandbox.io/s/fetch-opentdb-trivia-cvl0g

这是否意味着我需要使用NodeJS + Express来为这些视图中的每一个提供服务/导航？ 有什么办法可以解决React-Router的导航问题？ 事件发生后，是否可以根据状态更新/显示DOM中的项目？ 生命周期方法是否与可能的解决方案有关？ 请帮忙！

// react-router demo mimics the functionality I want: <a href="https://codesandbox.io/s/react-router-basic-4ifp7"/>
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function BasicRouterExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">HomeCard</Link>
          </li>
          <li>
            <Link to="/quiz">QuizCard</Link>
          </li>
          <li>
            <Link to="/results">ResultsCard</Link>
          </li>
        </ul>

        <hr />

        <Route exact path="/" component={HomeCard} />
        <Route path="/quiz" component={QuizCard} />
        <Route path="/results" component={ResultsCard} />
      </div>
    </Router>
  );
}

function HomeCard() {
  return (
    <div>
      <h2>Welcome to Trivia Challenge!</h2>
      <h3>You'll be presented with 10 True or False questions</h3>
      <button>BEGIN</button>
    </div>
  );
}

function QuizCard() {
  return (
    <div>
      <h2>QUIZ screen</h2>
      <h3>Questions text goes here</h3>
      <button>True</button>
      <button>False</button>
    </div>
  );
}

function ResultsCard() {
  return (
    <div>
      <h2>RESULTS: 3/5 Correct Answers</h2>
      <h3>question 1...CORRECT</h3>
      <h3>question 2...CORRECT</h3>
      <h3>question 3...INCORRECT</h3>
      <h3>question 2...CORRECT</h3>
      <h3>question 2...INCORRECT</h3>
    </div>
  );
}

export default BasicRouterExample;

BasicRouterExample：使用react-router，我看不到如何将onClick（）事件附加到buttons并删除SPA样式的导航链接（HomeCard，QuizCard，ResultsCard）。

Answer 1

您可以使用组件属性中的history导航到其他路线onClick 。 例如

this.props.history.push('/quiz');