我正在尝试使用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);
所以行为应该是我选择一些东西并在侧边栏旁边渲染,如下所示:
但是当select无法正确呈现时,我该怎么办?
答案 0 :(得分:0)
确保已将BrowserRouter
的App组件包装在index.js中,例如:
ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.getElementById('root'));