源组件在路由到其他网站页面时仍在其他网站页面上呈现

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>

        )
    }
}

我正在使用主要的react框架，感谢您的帮助！

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