Question

所以问题在于我是REACT的新手，我使用create-react-app并添加了Router函数以在组件之间进行路由。现在，我创建了一个可以正常使用的标题，但是我添加了一个汉堡菜单，以便可以在页面之间进行路由，突然间，标题就被复制了。

App.js：

import React, {Component} from 'react';
import { BrowserRouter as Router, Route} from "react-router-dom";
import './App.css';
import './Header.css'
import SideDrawer from "./SideDrawer";
import Header from './Header'
import Backdrop from './Backdrop'
import Home from "./Home";
import LoginPage from "./LoginPage";
import SignupPage from "./SignupPage";
import RegisterEventPage from "./RegisterEventPage";


class App extends Component {
    state = {
        sideDrawerOpen: false
    };

    drawerToggleClickHandler = () => {
        this.setState((prevState) => {
            return {sideDrawerOpen: !prevState.sideDrawerOpen};
        });
    };


    backDropClickHandler = () => {
        this.setState({sideDrawerOpen: false});
    };

    render() {
        let sideDrawer;
        let backdrop;

        if (this.state.sideDrawerOpen) {
            sideDrawer = <SideDrawer/>;
            backdrop = <Backdrop click={this.backDropClickHandler}/>;
        }

        return (
            <div style={{height: '100%'}}>
                <Header drawerClickHandler={this.drawerToggleClickHandler}/>
                {sideDrawer}
                {backdrop}

            <Router>
                <Route exact path="/" component={Home}/>
                <Route path="/loginPage" component={LoginPage}/>
                <Route path="/SignupPage" component={SignupPage}/>
                <Route path="/RegisterEventPage" component={RegisterEventPage}/>
            </Router>
            </div>
        );
    }
}

export default App;

Header.jsx：

import React, {Component} from 'react';
import DrawerToggleButton from './DrawerToggleButton';
import './Header.css';

class Header extends Component {
    render() {
        return (

            <header className="main_toolbar">
                <nav className="toolbar_navigation">
                    <div>
                        <DrawerToggleButton click={this.props.drawerClickHandler}/>
                    </div>
                    <div className="toolbar_logo"><a href="/">IceBreaker</a></div>
                    <div className="spacer"></div>
                </nav>
            </header>
        );
    }
}

export default Header;

例如，如果我从App.js中删除，我的第二个标头突然消失。

Image of two headers

Answer 1

在路由器内部呈现标题：我也建议您在路由器中使用交换机

您将需要导入它： fn closure_user(closure: Box<dyn FnOnce(usize) -> bool>) -> bool { closure(3) } fn main() { let big_data = vec![1, 2, 3, 4]; closure_user(Box::new(|x| { let _ = big_data.into_iter(); false })); }

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

由于路由器，我有两个不同的标题

1 个答案: