Getting my page to Route properly with ReactJS - reactjs

Question

Have a pretty basic app through ReactJS but having trouble with routing to a new page and can't figure out why. When I click on the box that should route me to the Quiz page, the contents on that page populate (just saying "hello") but everything else on the page stays the same. I thought it had to do with the exact path but even still, everything remains the same and doesnt just show what's within my Quiz Component. Any thoughts? Appreciate all the help!
APP.JS
import React, { Component } from 'react';
import { Route, Link, Switch } from 'react-router-dom';
import Home from "./Components/Home/Home"
import Header from "./Components/Header/Header"
import Modal from "./Components/Modal/Modal"
import Quiz from "./Components/Quiz/Quiz"
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
questions: this.props.questions,
show: false,
};
}
// Function that opens/closes Modal
showModal = () => {
this.setState({ show: !this.state.show })
}
render() {
return (
<div>
<header>
<Header />
{/* Input button for Modal */}
<input
className='open-modal-btn'
type='button'
onClick={this.showModal}
value=' Show Modal'
/>
<Modal show={this.state.show} onClose={this.showModal}>
This message is from Modal
</Modal>
</header>
<Home />
<div>
<Switch>
<Route
exact
path='/quiz'
render={() => {
return (
<Quiz />
);
}}
/>
</Switch>
</div>
</div>
);
}
}
export default App;
Home.JS
import React, { Component } from 'react';
import './Home.css';
import { Link } from 'react-router-dom';
class Home extends Component {
constructor(props) {
super(props);
this.state = { username: '' };
}
// Updates the name of the User input Box
handleChange = (event) => {
this.setState({ username: event.target.value });
};
render() {
return (
<main>
<div>
<form>
<label htmlFor='Username'> Username: </label>
<input
type='text'
name='username'
value={this.state.username}
onChange={this.handleChange}
/>
</form>
<div className='Allboxes'>
<div className='boxOne'>
<b> Name: </b> {this.state.username} <br />
<b> From: </b> Boston, MA <br />
<b> Interests: </b>Long walks on the beach, Golden Girls <br />
</div>
<div className='boxTwo'>
<b> Name: </b> {this.state.username} <br />
<b> From: </b> Dallas, TX <br />
<b> Interests: </b>Opera, Dank Memes <br />
</div>
<div className='boxThree'>
<b> Name: </b> {this.state.username} <br />
<b> From: </b> Long Beach, CA <br />
<b> Interests: </b>Shredding the Gnar, playing with yoyo's <br />
</div>
<Link to='/quiz'>
<div className='boxFour'>
<b> Name: </b> {this.state.username} <br />
<b> From: </b> Chicago, IL <br />
<b> Interests: </b>Pokemon, More Pokemon, Daisies <br />
</div>
</Link>
</div>
</div>
</main>
);
}
}
export default Home;
QUIZ.JS
import React, { Component } from 'react';
class Quiz extends Component {
render() {
return (
<div>
Hello
</div>
);
}
}
export default Quiz;
HEADER.JS
import React, { Component} from 'react';
import './Header.css';
import { Link } from 'react-router-dom';
class Header extends Component {
render() {
return (
<div>
<h1> Who Wants to be a Tandem Millionaire </h1>
<Link to='/'> Home </Link>
</div>
);
}
}
export default Header;
MODAL.JS
import React, { Component } from 'react';
import './Modal.css';
export default class Modal extends React.Component {
// Function that closes the Modal Button
onClose = (e) => {
this.props.onClose && this.props.onClose(e);
};
render() {
if (!this.props.show) {
return null;
}
return (
<div className='backdropStyle'>
<div className='modalStyle'>
{this.props.children}
<div className='footerStyle'>
<button
className='close-modal-btn'
onClick={(e) => {
this.onClose(e);
}}>
Close
</button>
</div>
</div>
</div>
);
}
}

Answer 1

I think the bug here could be that you did not wrap your App.js with Browser Router
Code below is a simple structuring of react-router
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import React from 'react'
const App = ()=>{
<Router>
<Switch>
<Route path="/another-route" exact={true}>
<AnotherComponent />
</Route>
<Route path="/" exact={true}>
<HomeComponent />
</Route>
</Switch>
</Router>
}
So following such a structure will get your React Routing well and even cleaner having App.js structured in such format,
You can also refer to the documentation if what I wrote does not make any sense
https://reactrouter.com/web/guides/quick-start