Как правильно реализовать боковую панель с реагирующим роутером? - PullRequest
Новая
       8

Как правильно реализовать боковую панель с реагирующим роутером?

0 голосов
/ 18 января 2019

Я пытаюсь создать представление основной детали с помощью маршрутизатора реагирования и реагирования, эта попытка пытается имитировать реакцию инструментальной панели материала от творческого тима, и это мой фактический код: 

/* 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);

Таким образом, поведение должно быть, я выбираю что-то и рендеринг рядом с боковой панелью, как это:

sidebar но когда select не рендерится правильно, что мне делать? selected

1 Ответ

0 голосов
/ 18 января 2019

Убедитесь, что вы завернули компонент приложения с BrowserRouter в index.js, например: 

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