我开始学习React,并且我在应用程序中工作分为两个部分:用户登录时和未登录时。
未登录用户时,“ /”将显示登录页面。登录后,将显示“仪表板”页面。在“仪表板”页面中,左侧有一个顶部导航栏和一个侧边栏,在“中心”将显示该页面的内容。从iMaster链接此图片:
因此,侧边栏将具有链接,这些链接将更新显示为仪表板组件子级的组件。我搜索了“嵌套路线”,但没有成功。
我正在尝试执行此操作,因为我看到如果我将在“所有”页面中显示导航,则最好一次加载导航,然后更新导航的子项,而不是每次都加载导航页面。
有人可以帮忙吗?
App.js
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Login from './pages/login';
import Dashboard from './pages/dashboard';
const App = () => (
<div className="App">
<BrowserRouter>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/dashboard" component={Dashboard} />
</Switch>
</BrowserRouter>
</div>
);
export default App;
仪表板
import React, { Component } from 'react';
//BOOTSTRAP
import 'bootstrap/dist/css/bootstrap.min.css';
import { Col, Container, Row } from 'react-bootstrap';
//BOOTSTRAP
import './styles.css';
import TopSideNavBar from '../../components/TopSideNavBar';
export default class Dashboard extends Component {
render() {
return(
<>
<div className="body">
<TopSideNavBar />
<Container fluid className="content">
<Switch>
<Route path={`${match.path}/component1`} render={Component1}/>
<Route path={`${match.path}/component2`} render={Component2}/>
</switch>
</Container>
</div>
</>
);
}
}
答案 0 :(得分:1)
用BrowserRouter
包装您的组件,并正确访问match.path
export default class Dashboard extends Component {
render() {
return (
<BrowserRouter>
<>
<div className="body">
<TopSideNavBar />
<Switch>
<Route path={`${this.props.match.path}/component1`} component={Component1} />
<Route path={`${this.props.match.path}/component2`} component={Component2} />
</Switch>
</div>
</>
</BrowserRouter>
);
}
}