如何解决从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>)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。