我有一个带有页眉、页脚和侧边栏的页面。App.js 文件如下 -
const App = () => {
return(
<React.Fragment>
<div id="header">
<Header />
</div>
<BrowserRouter>
<div className = "row">
<div className="col-2" id="sidebar">
<SideBar />
</div>
<div className="col-10" id="mainBody">
</div>
</div>
</BrowserRouter>
<div id="footer">
<Footer />
</div>
</React.Fragment>
);
};
export default App;
SideBar.js 文件如下 -
const SideBar = () => <div id="st-sidebar">
<BrowserRouter>
<ul id ="sidebar" className="nav nav-pills nav-stacked st-white-on-color">
<li className="st-bottom-line">
<Link to="/Dashboard">Dashboard </Link>
</li>
<li className="st-bottom-line">
<Link to='/Configuration'> Configuration </Link>
</li>
</ul>
<Route path="/Dashboard" component={Dashboard} />
<Route path="/Configuration" component={Configuration} />
</BrowserRouter>
</div>
export default SideBar;
当我单击两个链接中的任何一个时,它们会加载到侧边栏中。我想将它加载到 ID = mainBody 的 div 中。我该怎么做呢?我哪里错了?
我是 ReactJS 的新手,并且使用过 create-react-app。