Исходный компонент продолжает рендеринг на других страницах сайта при маршрутизации на них

Question

Мой исходный компонент (App.js) - это то, что я использую в качестве домашней страницы для маршрутизации на другие страницы.Однако, когда пользователь нажимает кнопку, которая направляет их на другую страницу, компоненты App.js по-прежнему отображаются на этой странице.Как мне остановить App.js от рендеринга на каждой странице?

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>

        )
    }
}

Я использую простую систему реагирования, и помощь приветствуется!

Answer 1

Вам необходимо разделить разметку для вашего 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 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