Блог

Я пытаюсь создать side-bar с ListItem помощью и перенаправить на страницу после нажатия на нее. Ниже то, что я пытаюсь. У меня есть 2 компонента класса в моем 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 ;
  

Если я правильно понял вашу проблему, попробуйте изменить эту часть

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

Похоже, вам не хватает компонента «BrowserRouter» (часто импортируемого как «Маршрутизатор») в вашем index.js:

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