从React中的侧边栏单击后如何路由到页面？

问题描述

我正在尝试使用side-bar构建一个ListItem，并在单击该页面后将其路由到该页面。以下是我尝试的方法。我的index中有2个类组件-一个是side menu，一个是要渲染的组件“ depositLayout”。当我单击它时，页面似乎无法呈现该组件，仅url被更改。我想念什么吗？非常感谢您的帮助。

代码：

index.js：

function App(props){
  
  return(
    <AppBar />
      <div>
        <Switch>
          <Route path="/deposit" exact component={depositLayout}></Route>
          <Route path="/"></Route>
        </Switch>
       </div>
  )  
}
const contentDiv = document.getElementById("root");
const gridProps = window.gridProps || {};
ReactDOM.render(React.createElement(App,gridProps),contentDiv);

AppBar.js

class AppBar extends React.Component {
  render() {
  return (
    <SideBar></SideBar>
  );
}
export default AppBar;

SideBar.js

class SideBar extends React.Component {
  constructor(props) {
    super(props);
      this.state = {
      popSideBar: false,};
  //some control sidebar behavior

  sideBarItem = item =>(
    <div>
      <List>
        <ListItem button key={'deposit'} component={Link} to="/deposit">
          <ListItemText primary={'Bank'}/>
        </ListItem>
      </List>
    </div>
  );
  render() {
    const { classes } = this.props;
    return (
      <Router>
        <SwipeableDrawer>
          {this.sideBarItem ('popSideBar')}
        </SwipeableDrawer>
      </Router>
    );  
  }
}
export default SideBar ;

解决方法

如果我对您有问题，请尝试更改此部分

 sideBarItem = item =>{
   return(
    <div>
      <List>
        <ListItem button key={'deposit'} component={Link} to="/deposit">
          <ListItemText primary={'Bank'}/>
        </ListItem>
      </List>
    </div>
   )
  }

,

似乎您在index.js中缺少“ BrowserRouter”（通常导入为“ Router”）组件：

import BrowserRouter as Router;

function App(props){
  return(
    <Router>
        <AppBar />
        <div>
            <Switch>
                <Route path="/deposit" exact component={depositLayout}></Route>
                <Route path="/"></Route>
            </Switch>
       </div>
   </Router>)  
}