如何正确实现带有反应路由器的侧边栏？

Question

我正在尝试使用 react 和 react 路由器构建一个主从视图，此尝试是试图从创意 tim 中模仿 material-dashboard-react，这是我的实际代码：

/* eslint-disable */
import React from "react";
import PropTypes from "prop-types";
import { Switch, Route, Redirect } from "react-router-dom";
import withStyles from "@material-ui/core/styles/withStyles";

import dashboardRoutes from "./routes/test.js";

import dashboardStyle from "./jss/styles";
import Sidebar from "./components/sidebar.jsx"

import image from "./image/sidebar-2.jpg";
import logo from "./logo.svg";

const switchRoutes = (
  <Switch>
    {dashboardRoutes.map((prop, key) => {
      return <Route path={prop.path} component={prop.component} key={key} />;
    })}
  </Switch>
);

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      mobileOpen: false
    };    
  }

  handleDrawerToggle = () => {
    this.setState({ mobileOpen: !this.state.mobileOpen });
  };  

  render() {
    const { classes, ...rest } = this.props;
    return (
        <div>
          <Sidebar
            routes={dashboardRoutes}
            logoText={"Davidsito"}
            logo={'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1000px-React-icon.svg.png'}
            image={image}
            handleDrawerToggle={this.handleDrawerToggle}
            open={this.state.mobileOpen}
            color="blue"
            {...rest}
          />
          <div className={classes.mainPanel} ref="mainPanel">
            {console.log(dashboardRoutes[3])}
            <div className={classes.content}>
              <div className={classes.container}>
                <Route 
                  path={dashboardRoutes[3].path} 
                  component={dashboardRoutes[3].component} 
                  key={1} 
                />;
              </div>
            </div>            
          </div>          
        </div>
    );
  }
}

App.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(dashboardStyle)(App);

所以行为应该是我选择一些东西并在侧边栏旁边呈现如下：

but when select doesn't render properly, What should I do?

Answer 1

确保您在 index.js 中使用 BrowserRouter 包装了 App 组件，例如：

ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.getElementById('root'));