时间戳

首页 > 解决方案 > 由于路由器，我有两个不同的标题

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

问题描述

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

应用程序.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;

页眉.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 中删除，我的第二个标题突然消失了。

两个标题的图像

标签： javascriptreactjsroutingheader

解决方案

在路由器中渲染您的标题：我还建议您在路由器中使用交换机

您将需要导入它： import { BrowserRouter as Router, Route} from "react-router-dom";

return (
            <div style={{height: '100%'}}>

               <Router>
                  <Header drawerClickHandler={this.drawerToggleClickHandler}/>
                  {sideDrawer}
                  {backdrop}

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

推荐阅读