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

【问题标题】：How to route to a page after clicking from side-bar in React?从 React 的侧边栏单击后如何路由到页面？
【发布时间】：2020-08-13 10:56:25
【问题描述】：

我正在尝试用ListItem 构建一个side-bar，并在单击它后路由到一个页面。下面是我尝试的。我的index 中有两个类组件——一个是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 ;

【问题讨论】：

标签： javascript reactjs routes react-router

【解决方案1】：

如果我没看错，请尝试更改这部分

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

【讨论】：

感谢您的回复。你的方向是对的。我发现当我单击侧边栏时，它只呈现自身而不呈现整个页面。但是我添加return时出现错误。

【解决方案2】：

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

【讨论】：