Javascript 组件不是自己填充的，而是我的头和主组件中的所有组件

通过ReactJS有一个非常基本的应用程序，但在路由到新页面时遇到问题，并且不知道为什么。当我点击应该将我发送到测验页面的框时，页面上的内容将填充（只是说“你好”），但页面上的其他内容保持不变。我认为这与确切的路径有关，但即使如此，一切都保持不变，不只是显示测验组件中的内容。有什么想法吗？感谢所有的帮助

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;

import React，{Component}来自'React'；
从“react router dom”导入{Route，Link，Switch}；
从“/Components/Home/Home”导入主页
从“/Components/Header/Header”导入标题
从“/Components/Modal/Modal”导入模态
从“/Components/quick/quick”导入测验
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
问题：这个。道具。问题，
秀:假,，
};
}
//打开/关闭模式的函数
showModal=（）=>{
this.setState（{show:！this.state.show}）
}
render（）{
返回(
{/*模式的输入按钮*/}
此消息来自Modal
{
返回(
);
}}
/>
);
}
}
导出默认应用程序；

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;

import React，{Component}来自'React'；
导入“/Home.css”；
从'react router dom'导入{Link}；
类Home扩展组件{
建造师（道具）{
超级（道具）；
this.state={用户名：'}；
}
//更新用户输入框的名称
handleChange=（事件）=>{
this.setState（{username:event.target.value}）；
};
render（）{
返回(
用户名：
名称：{this.state.username}

发件人：马萨诸塞州波士顿

兴趣：在海滩上长时间散步，金色女孩

名称：{this.state.username}

发件人：德克萨斯州达拉斯

兴趣：歌剧、潮湿的模因

名称：{this.state.username}

发件人：加利福尼亚州长滩

兴趣：切碎Gnar，玩yoyo的

名称：{this.state.username}

发件人：伊利诺伊州芝加哥

兴趣：口袋妖怪，更多的口袋妖怪，雏菊

);
}
}
导出默认主页；

quick.JS

import React, { Component } from 'react';

class Quiz extends Component {
    render() {
        return (
            <div>
                Hello
            </div>
        );
    }
}

export default Quiz;

import React，{Component}来自'React'；
类扩展组件{
render（）{
返回(
你好
);
}
}
导出默认测验；

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;

import React，{Component}来自'React'；
导入“./Header.css”；
从'react router dom'导入{Link}；
类头扩展组件{
render（）{
返回(
谁想成为百万富翁
家
);
}
}
导出默认标题；

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>
        );
    }
}

import React，{Component}来自'React'；
导入“/Modal.css”；
导出默认类Modal.Component{
//关闭模式按钮的函数
onClose=（e）=>{
this.props.onClose&&this.props.onClose（e）；
};
render（）{
如果（！this.props.show）{
返回null；
}
返回(
{this.props.children}
{
本条第1款（e）项；
}}>
接近
);
}
}

若要使路由正常工作，您必须使用路由器包装应用程序

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

导入{
BrowserRouter作为路由器，
转换
路线,，
链接
}从“反应路由器dom”；
导出默认函数App（）{
返回(


家


关于


使用者


{/*A查看其子对象和
呈现与当前URL匹配的第一个URL.*/}
您使用的是带有自定义历史记录的react router还是browserHistory？@Shyam我也没有使用，但我应该使用吗？我不相信我以前使用过，所以您使用BrowserRouter包装了您的路由/交换机，对吧？@Shyam每当我使用BrowserRouter包装我的路由/交换机时，测验组件和唯一的t都不会填充任何内容更改的是以“/quick”结尾的URL。您能在codesandbox或github链接中创建此URL并共享吗？感谢这里的帮助！我也尝试过此方法，但单击链接组件时仍然没有任何更改