使用 ReactJS 让我的页面正确路由

Question

通过 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;

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;

头文件.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

我认为这里的错误可能是您没有使用 Browser Router

包装 App.js

下面的代码是一个简单的 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>
}

因此，遵循这样的结构将使您的 React Routing 变得更好，甚至让 App.js 以这种格式结构化，

如果我写的没有任何意义，你也可以参考文档

https://reactrouter.com/web/guides/quick-start