저는 React에 대해 배우기 시작하고 사용자가 로그인 할 때와 로그인하지 않았을 때 두 부분으로 애플리케이션에서 작업하고 있습니다.
사용자가 로그인되지 않은 경우 "/"는 로그인 페이지를 표시합니다. 로그인되면 대시 보드 페이지가 표시됩니다. 대시 보드 페이지의 왼쪽에는 상단 탐색 메뉴와 사이드 바가 있으며 "중앙"에는 페이지의 내용이 표시됩니다. iMaster 에서이 이미지에 링크 :
따라서 사이드 바에는 대시 보드 구성 요소의 자식으로 표시되는 구성 요소를 업데이트하는 링크가 있습니다. "Nested Routes"를 검색했지만 성공하지 못했습니다.
"모든"페이지에 nav를 표시하면 모든 페이지에서 nav를로드하는 대신 nav를 한 번로드 한 다음 nav에서 자식을 업데이트하는 것이 더 낫다는 것을 알기 때문에이 작업을 수행하려고합니다.
누구든지 도울 수 있습니까?
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>
</>
);
}
}
구성 요소를 감싸고 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>
);
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다