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

我正试图用

列表项构建一个
侧栏
，并在单击后发送到页面。下面是我尝试的。我的
索引中有两个类组件
——一个是
侧菜单
，另一个是待渲染组件“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);

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>)  
}

功能应用程序（道具）{
返回(
)  
}
const contentDiv=document.getElementById（“根”）；
const gridProps=window.gridProps | |{}；
render（React.createElement（App，gridProps），contentDiv）；

AppBar.js

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

类AppBar扩展React.Component{
render（）{
返回(
);
}
导出默认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 ;

类侧栏扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
popSideBar:false，
};
//一些控件控制侧栏行为
sideBarItem=项目=>(
);
render（）{
const{classes}=this.props；
返回(
{this.sideBarItem（'popSideBar'）}
);  
}
}
导出默认边栏；
如果我正确理解您的问题，请尝试更改此部分

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

sideBarItem=项目=>{
返回(
)
}
您似乎缺少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>)  
}

导入浏览器路由器作为路由器；
功能应用程序（道具）{
返回(
)  
}
谢谢您的回复。您的方向是正确的。我发现当我单击侧边栏时，它只呈现自身，而不是整个页面。但是当我添加return时出现错误。