Navigating to Different Views/Screens in ReactJS onClick()

Question

I'm trying to create three screens, or views, for my ReactJS trivia app. The trivia app consumes an API and then manipulates that response's data, after onClick() events:

1. /home onClick() = redirect to /quiz
2. /quiz
3. /results Results displayed & 'Try Again' button redirects to /home

Desired application flow: I want to start on /home screen. After clicking the /home screen's 'Begin' button the user is redirected to the /quiz - where the quiz begins presenting a fixed number of questions to the user, one at a time. After all questions have been answered, there will be a redirect/routing to the /results screen. Here the user will be presented with their score, and their completed list of questions with correct/incorrect. The clicked 'Try Again' button redirects to /home & restarts the quiz app.

At this point, I've looked at several potential ways of doing this, but nothing seems to be what I'm looking for. react-router doesn't seem to be capable of navigation without those Navigation links.
https://reacttraining.com/react-router/web/guides/quick-start
https://reactjs.org/docs/handling-events.html

This is the API call ComponentDidMount() followed by a list of questions (as I'd like /results to appear:
https://codesandbox.io/s/fetch-opentdb-trivia-cvl0g

Does this mean I need to use NodeJS + Express to serve/navigate to each one of these views? Is there a way I can work around react-router for navigation? Could I just update/display items in the DOM, based on state, after events? Do lifecycle methods have anything to do with a possible solution? Please help!

// 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: Using react-router I don't see how I can attach onClick() events to buttons & remove the SPA-styled nav links (HomeCard, QuizCard,ResultsCard).

Answer 1

You can use history from your component's props to navigate to other route onClick . For example

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