Javascript ReactJs菜单链接堆叠主要部分组件

我有一个ReactJS Web应用程序，使用带有ReactRouter dom的BrowserRouter。有一个基本组件，它有一个侧栏和一个包含props.children的部分。如果我将有效路由的url放在地址栏中，它可以正常加载，但它必须加载整个应用程序，包括标题和边栏。但是，如果我单击侧边栏上的链接，它只会加载包含新页面的部分。问题在于，它还包括新页面下方的上一页。因此，由于某种原因，当按下侧边栏菜单上的链接时，children.props只是将新组件添加到现有的on

这里是app.js：

class App extends Component {
constructor(props){
    super(props);
    this.state = {authenticated: false};
}
componentDidUpdate(prevProps, prevState, prevContext) {
    if (this.props.state.sessionState.appUser && !this.state.authenticated) {
        this.setState({authenticated: true});
    }
}

render() {

// specify base href from env varible 'WP_BASE_HREF'
// use only if application isn't served from the root
// for development it is forced to root only
/* global WP_BASE_HREF */
const basename = process.env.NODE_ENV === 'development' ? '/' : (WP_BASE_HREF || '/');


        return (
            <BrowserRouter basename={basename}>
                <Routes/>
            </BrowserRouter>);

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={authenticated:false}；
}
componentDidUpdate（prevProps、prevState、prevContext）{
if（this.props.state.sessionState.appUser&&！this.state.authenticated）{
this.setState（{authenticated:true}）；
}
}
render（）{
//从环境变量“WP\u base\u href”中指定基本href
//仅当应用程序不是从根目录提供服务时使用
//为了发展，它只能被迫扎根
/*全球WP_BASE_HREF*/
const basename=process.env.NODE|env==='development'？'/'：（WP|u BASE_HREF | | |'/'）；
返回(
);

}

}

这是Routes.js

import React from 'react';
import { withRouter, Switch, Route, Redirect } from 'react-router-dom';
import { TransitionGroup, CSSTransition } from 'react-transition-group';

import Base from './components/Layout/Base';
import BasePage from './components/Layout/BasePage';
// import BaseHorizontal from './components/Layout/BaseHorizontal';

import CompanyList from './components/Company/CompanyList'
import CompanyDetail from './components/Company/CompanyDetail'
import CompanyCreate from './components/Company/CompanyCreate'
import MyAccount from './components/Users/MyAccount'
import UserList from './components/Users/UserList'
import Dashboard from './components/Dashboard/Dashboard';

import ToolList from './components/Tools/ToolList';
import ToolCreate from './components/Tools/ToolCreate';

import Widgets from './components/Widgets/Widgets';

import Buttons from './components/Elements/Buttons';
import Notifications from './components/Elements/Notifications';
import SweetAlert from './components/Elements/SweetAlert';
import BsCarousel from './components/Elements/Carousel';
import Spinner from './components/Elements/Spinner';
import Animation from './components/Elements/Animation';
import DropdownAnimation from './components/Elements/DropdownAnimation';
import Nestable from './components/Elements/Nestable';
import Sortable from './components/Elements/Sortable';
import Cards from './components/Elements/Cards';
import Grid from './components/Elements/Grid';
import GridMasonry from './components/Elements/GridMasonry';
import Typography from './components/Elements/Typography';
import FontIcons from './components/Elements/FontIcons';
import WeatherIcons from './components/Elements/WeatherIcons';
import Colors from './components/Elements/Colors';

import ChartFlot from './components/Charts/ChartFlot';
import ChartRadial from './components/Charts/ChartRadial';
import ChartChartJS from './components/Charts/ChartChartJS';
import ChartMorris from './components/Charts/ChartMorris';
import ChartChartist from './components/Charts/ChartChartist';

import MapsGoogle from './components/Maps/MapsGoogle';
import MapsVector from './components/Maps/MapsVector';

import TableStandard from './components/Tables/TableStandard';
import TableExtended from './components/Tables/TableExtended';
import Datatable from './components/Tables/DatatableView';
import DataGrid from './components/Tables/DataGrid';

import FormStandard from './components/Forms/FormStandard';
import FormExtended from './components/Forms/FormExtended';
import FormValidation from './components/Forms/FormValidation';
import FormWizard from './components/Forms/FormWizard';
import FormUpload from './components/Forms/FormUpload';
import FormCropper from './components/Forms/FormCropper';

import Login from './components/Pages/Login';
import Register from './components/Pages/Register';
import Recover from './components/Pages/Recover';
import Lock from './components/Pages/Lock';
import NotFound from './components/Pages/NotFound';
import Error500 from './components/Pages/Error500';
import Maintenance from './components/Pages/Maintenance';

import Mailbox from './components/Extras/Mailbox';
import Timeline from './components/Extras/Timeline';
import Calendar from './components/Extras/Calendar';
import Invoice from './components/Extras/Invoice';
import Search from './components/Extras/Search';
import Todo from './components/Extras/Todo';
import Profile from './components/Extras/Profile';
import BugTracker from './components/Extras/BugTracker';
import ContactDetails from './components/Extras/ContactDetails';
import Contacts from './components/Extras/Contacts';
import Faq from './components/Extras/Faq';
import FileManager from './components/Extras/FileManager';
import Followers from './components/Extras/Followers';
import HelpCenter from './components/Extras/HelpCenter';
import Plans from './components/Extras/Plans';
import ProjectDetails from './components/Extras/ProjectDetails';
import Projects from './components/Extras/Projects';
import Settings from './components/Extras/Settings';
import SocialBoard from './components/Extras/SocialBoard';
import TeamViewer from './components/Extras/TeamViewer';
import VoteLinks from './components/Extras/VoteLinks';

import EcommerceOrder from './components/Ecommerce/EcommerceOrders';
import EcommerceOrderView from './components/Ecommerce/EcommerceOrderView';
import EcommerceProduct from './components/Ecommerce/EcommerceProducts';
import EcommerceProductView from './components/Ecommerce/EcommerceProductView';
import EcommerceCheckout from './components/Ecommerce/EcommerceCheckout';

import BlogList from './components/Blog/BlogList';
import BlogPost from './components/Blog/BlogPost';
import BlogArticle from './components/Blog/BlogArticles';
import BlogArticleView from './components/Blog/BlogArticleView';

import ForumCategories from './components/Forum/ForumCategories';
import ForumTopic from './components/Forum/ForumTopics';
import ForumDiscussion from './components/Forum/ForumDiscussion';
import q from './components/AdminTools/querytools';


// List of routes that uses the page layout
// listed here to Switch between layouts
// depending on the current pathname
const listofPages = [
    '/login',
    '/register',
    '/recover',
    '/lock',
    '/notfound',
    '/error500',
    '/maintenance'
];

const Routes = ({ location }) => {
    const currentKey = location.pathname.split('/')[1] || '/';
    const timeout = { enter: 500, exit: 500 };

    // Animations supported
    //      'rag-fadeIn'
    //      'rag-fadeInUp'
    //      'rag-fadeInDown'
    //      'rag-fadeInRight'
    //      'rag-fadeInLeft'
    //      'rag-fadeInUpBig'
    //      'rag-fadeInDownBig'
    //      'rag-fadeInRightBig'
    //      'rag-fadeInLeftBig'
    //      'rag-zoomBackDown'
    const animationName = 'rag-fadeIn'

    if(listofPages.indexOf(location.pathname) > -1) {
        return (
            // Page Layout component wrapper
            <BasePage>
                <Switch location={location}>
                    <Route path="/login" component={Login}/>
                    <Route path="/register" component={Register}/>
                    <Route path="/recover" component={Recover}/>
                    <Route path="/lock" component={Lock}/>
                    <Route path="/notfound" component={NotFound}/>
                    <Route path="/error500" component={Error500}/>
                    <Route path="/maintenance" component={Maintenance}/>
                </Switch>
            </BasePage>
        )
    }
    else {
        return (
            // Layout component wrapper
            // Use <BaseHorizontal> to change layout
            <Base>
              <TransitionGroup>
                <CSSTransition key={currentKey} timeout={timeout} classNames={animationName} exit={false}>
                    <div>
                        <Switch location={location}>


                            {/*My Company*/}
                            <Route path="/companyList" component={CompanyList}/>
                            <Route path="/companyDetail" component={CompanyDetail}/>
                            <Route path="/companyCreate" component={CompanyCreate}/>

                            {/* User */}
                            <Route path="/users" component={UserList}/>
                            <Route path="/myAccount" component={MyAccount}/>


                            {/*Dashboard*/}
                            <Route path="/dashboard" component={Dashboard}/>

                            {/* Tools  */}
                            <Route path="/toolList" component={ToolList}/>
                            <Route path="/toolCreate" component={ToolCreate}/>

                            {/*Widgets*/}
                            <Route path="/widgets" component={Widgets}/>

                            {/*Elements*/}
                            <Route path="/buttons" component={Buttons}/>
                            <Route path="/notifications" component={Notifications}/>
                            <Route path="/sweetalert" component={SweetAlert}/>
                            <Route path="/carousel" component={BsCarousel}/>
                            <Route path="/spinners" component={Spinner}/>
                            <Route path="/animations" component={Animation}/>
                            <Route path="/dropdown" component={DropdownAnimation}/>
                            <Route path="/nestable" component={Nestable}/>
                            <Route path="/sortable" component={Sortable}/>
                            <Route path="/cards" component={Cards}/>
                            <Route path="/grid" component={Grid}/>
                            <Route path="/grid-masonry" component={GridMasonry}/>
                            <Route path="/typography" component={Typography}/>
                            <Route path="/icons-font" component={FontIcons}/>
                            <Route path="/icons-weather" component={WeatherIcons}/>
                            <Route path="/colors" component={Colors}/>

                            {/*Forms*/}
                            <Route path="/form-standard" component={FormStandard}/>
                            <Route path="/form-extended" component={FormExtended}/>
                            <Route path="/form-validation" component={FormValidation}/>
                            <Route path="/form-wizard" component={FormWizard}/>
                            <Route path="/form-upload" component={FormUpload}/>
                            <Route path="/form-cropper" component={FormCropper}/>

                            {/*Charts*/}
                            <Route path="/chart-flot" component={ChartFlot}/>
                            <Route path="/chart-radial" component={ChartRadial}/>
                            <Route path="/chart-chartjs" component={ChartChartJS}/>
                            <Route path="/chart-morris" component={ChartMorris}/>
                            <Route path="/chart-chartist" component={ChartChartist}/>

                            {/*Table*/}
                            <Route path="/table-standard" component={TableStandard}/>
                            <Route path="/table-extended" component={TableExtended}/>
                            <Route path="/table-datatable" component={Datatable}/>
                            <Route path="/table-datagrid" component={DataGrid}/>

                            {/*Maps*/}
                            <Route path="/map-google" component={MapsGoogle}/>
                            <Route path="/map-vector" component={MapsVector}/>

                            {/*Extras*/}
                            <Route path="/mailbox" component={Mailbox}/>
                            <Route path="/timeline" component={Timeline}/>
                            <Route path="/calendar" component={Calendar}/>
                            <Route path="/invoice" component={Invoice}/>
                            <Route path="/search" component={Search}/>
                            <Route path="/todo" component={Todo}/>
                            <Route path="/profile" component={Profile}/>
                            <Route path="/ecommerce-orders" component={EcommerceOrder}/>
                            <Route path="/ecommerce-order-view" component={EcommerceOrderView}/>
                            <Route path="/ecommerce-products" component={EcommerceProduct}/>
                            <Route path="/ecommerce-product-view" component={EcommerceProductView}/>
                            <Route path="/ecommerce-checkout" component={EcommerceCheckout}/>
                            <Route path="/blog-list" component={BlogList}/>
                            <Route path="/blog-post" component={BlogPost}/>
                            <Route path="/blog-articles" component={BlogArticle}/>
                            <Route path="/blog-article-view" component={BlogArticleView}/>
                            <Route path="/forum-categories" component={ForumCategories}/>
                            <Route path="/forum-topics" component={ForumTopic}/>
                            <Route path="/forum-discussion" component={ForumDiscussion}/>
                            <Route path="/bug-tracker" component={BugTracker}/>
                            <Route path="/contact-details" component={ContactDetails}/>
                            <Route path="/contacts" component={Contacts}/>
                            <Route path="/faq" component={Faq}/>
                            <Route path="/file-manager" component={FileManager}/>
                            <Route path="/followers" component={Followers}/>
                            <Route path="/help-center" component={HelpCenter}/>
                            <Route path="/plans" component={Plans}/>
                            <Route path="/project-details" component={ProjectDetails}/>
                            <Route path="/projects" component={Projects}/>
                            <Route path="/settings" component={Settings}/>
                            <Route path="/social-board" component={SocialBoard}/>
                            <Route path="/team-viewer" component={TeamViewer}/>
                            <Route path="/vote-links" component={VoteLinks}/>
                            <Route path="/q" component={q}/>


                            <Redirect to="/dashboard"/>
                        </Switch>
                    </div>
                </CSSTransition>
              </TransitionGroup>
            </Base>
        )
    }
}

export default withRouter(Routes);

从“React”导入React；
从“react router dom”导入{withRouter，Switch，Route，Redirect}；
从'react transition group'导入{TransitionGroup，CSTranslation}；
从“./components/Layout/Base”导入基础；
从“./components/Layout/BasePage”导入BasePage；
//从“./components/Layout/BaseHorizontal”导入BaseHorizontal；
从“./components/Company/CompanyList”导入CompanyList
从“./components/Company/CompanyDetail”导入CompanyDetail
从“./组件/公司/公司创建”导入公司创建
从“./components/Users/MyAccount”导入MyAccount
从“./components/Users/UserList”导入用户列表
从“./components/Dashboard/Dashboard”导入仪表板；
从“./components/Tools/ToolList”导入工具列表；
从“./components/Tools/ToolCreate”导入ToolCreate；
从“./components/Widgets/Widgets”导入小部件；
从“./components/Elements/Buttons”导入按钮；
从“./components/Elements/Notifications”导入通知；
从“/components/Elements/SweetAlert”导入SweetAlert；
从“/components/Elements/Carousel”导入BsCarousel；
从“./components/Elements/Spinner”导入微调器；
从“./components/Elements/Animation”导入动画；
从“/components/Elements/DropdownAnimation”导入DropdownAnimation；
从“./components/Elements/Nestable”导入可嵌套文件；
从“./components/Elements/Sortable”导入可排序文件；
从“./components/Elements/Cards”导入卡片；
从“./components/Elements/Grid”导入网格；
从“./components/Elements/GridMassiness”导入网格砌体；
从“./组件/元素/排版”导入排版；
从“/components/Elements/FontIcons”导入FontIcons；
从“./components/Elements/WeatherIcons”导入天气图标；
从“./组件/元素/颜色”导入颜色；
从“./components/Charts/ChartFlot”导入ChartFlot；
从“./components/Charts/ChartRadial”导入ChartRadial；
从“./components/Charts/ChartJS”导入ChartJS；
从“./components/Charts/ChartMorris”导入ChartMorris；
从“./components/Charts/ChartList”导入图表列表；
从“./components/Maps/MapsGoogle”导入MapsGoogle；
从“./components/Maps/MapsVector”导入MapsVector；
从“./components/Tables/TablesStandard”导入表标准；
从“./components/Tables/TableExtended”导入TableExtended；
从“./components/Tables/DatatableView”导入Datatable；
从“./components/Tables/DataGrid”导入DataGrid；
从“./components/Forms/FormStandard”导入FormStandard；
从“./components/Forms/FormExtended”导入FormExtended；
从“./components/Forms/FormValidation”导入FormValidation；
从“./components/Forms/FormWizard”导入FormWizard；
从“./components/Forms/FormUpload”导入FormUpload；
从“./components/Forms/FormCropper”导入FormCropper；
从“./components/Pages/Login”导入登录名；
从“./components/Pages/Register”导入寄存器；
从“./components/Pages/Recover”导入恢复；
从“./components/Pages/Lock”导入锁；
从“./components/Pages/NotFound”导入NotFound；
从“./components/Pages/Error500”导入Error500；
从“./components/Pages/Maintenance”导入维护；
从“./components/Extras/Mailbox”导入邮箱；
从“/components/Extras/Timeline”导入时间线；
从“./components/Extras/Calendar”导入日历；
从“./组件/附加件/发票”导入发票；
从“/components/Extras/Search”导入搜索；
从“./components/Extras/Todo”导入Todo；
从“/components/Extras/Profile”导入配置文件；
从“/components/Extras/BugTracker”导入BugTracker；
从“/components/Extras/ContactDetails”导入ContactDetails；
从“/components/Extras/Contacts”导入联系人；
从“/components/Extras/Faq”导入常见问题；
从“/components/Extras/FileManager”导入文件管理器；
从“./components/Extras/Followers”导入追随者；
从“/components/Extras/HelpCenter”导入帮助中心；
从“/components/Extras/Plans”导入计划；
从“/components/Extras/ProjectDetails”导入项目详细信息；
从“/components/Extras/Projects”导入项目；
从“/components/Extras/Settings”导入设置；
从“/components/Extras/SocialBoard”导入SocialBoard；
从“/components/Extras/TeamViewer”导入TeamViewer；
从“/components/Extras/VoteLinks”导入VoteLinks；
从“/组件/电子商务/电子商务订单”导入电子商务订单；
从“/components/Ecommerce/EcommerceOrderView”导入电子商务OrderView；
从“./组件/电子商务/电子商务产品”导入电子商务产品；
从“/components/Ecommerce/EcommerceProductView”导入电子商务产品视图；
从“./components/Ecommerce/EcommerceCheckout”导入电子商务；
英普
import React from 'react';

import Header from './Header'
import Sidebar from './Sidebar'
import Offsidebar from './Offsidebar'
import Footer from './Footer'

const Base = props => (
    <div className="wrapper">
        <Header />

        <Sidebar />

        <Offsidebar />

        <section className="section-container">
            { props.children }
        </section>

        <Footer />
    </div>
)

export default Base;

import React, { Component } from 'react';
import { translate, Trans } from 'react-i18next';
import { Link, withRouter } from 'react-router-dom';
import { Collapse, Badge } from 'reactstrap';

import SidebarRun from './Sidebar.run';
import SidebarUserBlock from './SidebarUserBlock';

import MenuData from '../../Menu.js';
import {connect} from "react-redux";
import {compose} from "recompose";

/** Component to display headings on sidebar */
const SidebarItemHeader = ({item}) => (
    <li className="nav-heading">
        <span><Trans i18nKey={item.translate}>{item.heading}</Trans></span>
    </li>
)

/** Normal items for the sidebar */
const SidebarItem = ({item, isActive}) => (
    <li className={ isActive ? 'active' : '' }>
        <Link to={item.path} title={item.name}>
            {item.label && <Badge tag="div" className="pull-right" color={item.label.color}>{item.label.value}</Badge>}
            {item.icon && <em className={item.icon}></em>}
            <span><Trans i18nKey={item.translate}>{item.name}</Trans></span>
        </Link>
    </li>
)

/** Build a sub menu with items inside and attach collapse behavior */
const SidebarSubItem = ({item, isActive, handler, children, isOpen}) => (
    <li className={ isActive ? 'active' : '' }>
        <div className="nav-item" onClick={ handler }>
            {item.label && <Badge tag="div" className="pull-right" color={item.label.color}>{item.label.value}</Badge>}
            {item.icon && <em className={item.icon}></em>}
            <span><Trans i18nKey={item.translate}>{item.name}</Trans></span>
        </div>
        <Collapse isOpen={ isOpen }>
            <ul id={item.path} className="sidebar-nav sidebar-subnav">
                { children }
            </ul>
        </Collapse>
    </li>
)

/** Component used to display a header on menu when using collapsed/hover mode */
const SidebarSubHeader = ({item}) => (
    <li className="sidebar-subnav-header">{item.name}</li>
)


var Menu = MenuData.NIL;
class Sidebar extends Component {


    constructor(props) {
        super(props);
        this.state = {
            collapse: {},
            role: 'NIL'
        }
        var u = this.props.sessionState.appUser;
        Menu = MenuData.NIL;
    }
    componentDidMount() {
        if (this.props.sessionState.appUser) {
            const u = this.props.sessionState.appUser;
            this.setState({
                role: u.role
            })
            Menu = MenuData[u.role];
        }


        // pass navigator to access router api
        SidebarRun(this.navigator.bind(this));
        // prepare the flags to handle menu collapsed states
        this.buildCollapseList()
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.sessionState.appUser) {
            const u = nextProps.sessionState.appUser;
            this.setState ({
                role: u.role
            });
            Menu = MenuData[u.role];
        }
    }
    /** prepare initial state of collapse menus. Doesnt allow same route names */
    buildCollapseList = () => {
        let collapse = {};
        Menu
            .filter(({heading}) => !heading)
            .forEach(({name, path, submenu}) => {
                collapse[name] = this.routeActive(submenu ? submenu.map(({path})=>path) : path)
            })
        this.setState({collapse});
    }

    navigator(route) {
        this.props.history.push(route);
    }

    routeActive(paths) {
        paths = Array.isArray(paths) ? paths : [paths];
        if (paths.indexOf(this.props.location.pathname.replace('/','')) > -1)
            return true;
        return false;
    }

    toggleItemCollapse(stateName) {
        for (let c in this.state.collapse) {
            if (this.state.collapse[c] === true && c !== stateName)
                this.setState({
                    collapse: {
                        [c]: false
                    }
                });
        }
        this.setState({
            collapse: {
                [stateName]: !this.state.collapse[stateName]
            }
        });
    }

    getSubRoutes = item => item.submenu.map(({path}) => path)

    /** map menu config to string to determine what elemetn to render */
    itemType = item => {
        if (item.heading) return 'heading';
        if (!item.submenu) return 'menu';
        if (item.submenu) return 'submenu';
    }

    render() {
        const r = this.state.role;
        const Menu = MenuData[r];

        return (
            <aside className='aside-container'>
                { /* START Sidebar (left) */ }
                <div className="aside-inner">
                    <nav data-sidebar-anyclick-close="" className="sidebar">
                        { /* START sidebar nav */ }
                        <ul className="sidebar-nav">
                            { /* START user info */ }
                            <li className="has-user-block">
                                <SidebarUserBlock/>
                            </li>
                            { /* END user info */ }

                            { /* Iterates over all sidebar items */ }
                            {
                                Menu.map((item, i) => {
                                    // heading
                                    if(this.itemType(item) === 'heading')
                                        return (
                                            <SidebarItemHeader item={item} key={i} />
                                        )
                                    else {
                                        if(this.itemType(item) === 'menu')
                                            return (
                                                <SidebarItem isActive={this.routeActive(item.path)} item={item} key={i} />
                                            )
                                        if(this.itemType(item) === 'submenu')
                                            return [
                                                <SidebarSubItem item={item} isOpen={this.state.collapse[item.name]} handler={ this.toggleItemCollapse.bind(this, item.name) } isActive={this.routeActive(this.getSubRoutes(item))} key={i}>
                                                    <SidebarSubHeader item={item} key={i}/>
                                                    {
                                                        item.submenu.map((subitem, i) =>
                                                            <SidebarItem key={i} item={subitem} isActive={this.routeActive(subitem.path)} />
                                                        )
                                                    }
                                                </SidebarSubItem>
                                            ]
                                    }
                                    return null; // unrecognized item
                                })
                            }
                        </ul>
                        { /* END sidebar nav */ }
                    </nav>
                </div>
                { /* END Sidebar (left) */ }
            </aside>
        );
    }
}


const mapStateToProps = (state) => ({
    sessionState: state.sessionState
});

const mapDispatchToProps = (dispatch) => ({

});



const authCondition = (authUser) => !!authUser;

export default compose(
    withRouter,
    connect(mapStateToProps, mapDispatchToProps),
    translate('translations')
)(Sidebar);

//export default translate('translations')(withRouter(Sidebar));