Source component keeps rendering on other website pages when routing to them - reactjs

Question

My source component (App.js) is what I'm using as my "homepage" to route to the other pages. However when the user clicks a button that routes them to another page, the App.js componennts still renders on that page. How do I stop App.js from rendering on every page?
App.js:
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { Component } from 'react'
import './App.css';
import 'primereact/resources/themes/nova-light/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import TruckSetupPage from "./Components/TruckSetupPage";
import carThirdPage from './Components/carThirdPage';
import { Button } from 'primereact/button';
import logoImage from './Components/corvette.png';
export class App extends Component {
render() {
return (
<Router>
<div>
<div className="Page-Title">
<div className="Page-Subtitle">
<header>car</header>
</div>
</div>
{/*Makeshift spacer because to prevent css page-title css overriding subtitle css */}
<div>
<h1 className="Page-Header-Three">corvette Online Truck Estimator</h1>
</div>
<div>
{/*Route To different pages for testing sake*/}
<center>
<switch>
<Route path="/TruckSetupPage/" component={TruckSetupPage} />
<Route path="/carThirdPage/" component={carThirdPage} />
</switch>
<GetStartedButton></GetStartedButton>
</center>
</div>
</div>
</Router>
);
}
}
export default App;
export class GetStartedButton extends Component {
getStartedClick() {
//Open new window to TruckSetup
window.open('http://localhost:3000/TruckSetupPage');
}
render() {
return (
<div>
<img src={logoImage} className="logoImage" alt="logo" />
<div>
<Button label="Get Started" className="p-button-raised" p-button-rounded onClick={this.getStartedClick} />
</div>
</div>
)
}
}
I am using the prime react framework and help is appreciated!

Answer 1

You need to separate the markup for your App.js in a separate component. Otherwise, the content rendered inside the Router that is not defined in a Route will display at all times.
Try something like this:
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { Component } from 'react'
import './App.css';
import 'primereact/resources/themes/nova-light/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import TruckSetupPage from "./Components/TruckSetupPage";
import carThirdPage from './Components/carThirdPage';
import Home from "./Components/Home
export class App extends Component {
render() {
return (
<Router>
<div>
<div>
{/*Route To different pages for testing sake*/}
<center>
<switch>
<Route path="/" exact component={Home}/>
<Route path="/TruckSetupPage/" component={TruckSetupPage} />
<Route path="/carThirdPage/" component={carThirdPage} />
</switch>
</center>
</div>
</div>
</Router>
);
}
}
export default App;
Home.js
import React from "react"
import GetStartedButton from "./GetStartedButton"
const Home = () => {
return(
<div>
<div className="Page-Title">
<div className="Page-Subtitle">
<header>car</header>
</div>
</div>
{/*Makeshift spacer because to prevent css page-title css overriding subtitle css */}
<div>
<h1 className="Page-Header-Three">corvette Online Truck Estimator</h1>
</div>
<GetStartedButton/>
</div>
)
}
export default Home
GetStartedButton
import React from "react"
import { Button } from 'primereact/button';
import logoImage from './corvette.png';
const GetStartedButton = () => {
const getStartedClick = () => {
//Open new window to TruckSetup
window.open('http://localhost:3000/TruckSetupPage');
}
return (
<div>
<img src={logoImage} className="logoImage" alt="logo" />
<div>
<Button label="Get Started" className="p-button-raised" p-button-rounded onClick={getStartedClick} />
</div>
</div>
)
}
export default GetStartedButton