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

问题描述

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

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;

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

解决方法

我认为这里的错误可能是您没有使用浏览器路由器

包装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