PROSAGA码农传奇-opentsdb-在ReactJS onClick（）中导航到不同的视图/屏幕

<p>我正在尝试为我的ReactJS trivia应用程序创建三个屏幕或视图。在onClick()事件发生后，琐事应用程序将使用API，然后处理该响应的数据：</p><p>/home onClick() =重定向到/ quiz<br/>/quiz<br/>/results显示结果并’Try Again’ button重定向到/home<br/>所需的应用程序流程： 我想在/home屏幕上开始。单击/home屏幕后’Begin’ button，用户将被重定向到/quiz-，该测验开始向用户显示固定数量的问题，一次一次。回答完所有问题后，将有一个重定向/路由到/results屏幕。在这里，将向用户显示他们的分数以及正确/不正确的问题的完整列表。单击后’Try Again’ button重定向到/home并重新启动测验应用程序。</p><p>在这一点上，我已经研究了几种可能的方法，但是似乎没有什么是我想要的。没有这些导航链接，react-router似乎无法导航。<br/><a href="https://reacttraining.com/react-router/web/guides/quick-start">https://reacttraining.com/react-router/web/guides/quick-start</a><br/><a href="https://reactjs.org/docs/handling-events.html">https://reactjs.org/docs/handling-events.html</a></p><p>这是API调用，ComponentDidMount()后面是问题列表（如我想/results出现的那样：https :<br/>//codesandbox.io/s/fetch-opentdb-trivia-cvl0g</p><p>这是否意味着我需要使用NodeJS + Express来为这些视图中的每一个提供服务/导航？有什么办法可以解决React-Router的导航问题？事件发生后，是否可以根据状态更新/显示DOM中的项目？生命周期方法是否与可能的解决方案有关？请帮忙！</p>
<pre><code>// 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;
</code></pre><p>BasicRouterExample：使用react-router，我看不到如何附加onClick（）事件以buttons删除SPA样式的导航链接（HomeCard，QuizCard，ResultsCard）。</p>