ReactJS에서 단일 페이지 응용 프로그램 (SPA)을 개발 중이며 로그인 페이지를 별도의 페이지에서 어떻게 가질 수 있는지 알고 싶습니다.로그인 페이지를 ReactJS의 단일 페이지 응용 프로그램 (SPA)에서 분리
내 응용 프로그램의 기반으로 create-react-app
를 사용하고, 나는 현재 App.js
파일 내 SPA에 대한 템플릿을 정의하고, 그리고 다른의 .js의 각 구성 요소 파일 : Page1.js
, Page2.js
등 내가 react-router-dom
을 사용하고 (V^4.2.2) 내 애플 리케이션의 라우팅에 대한.
내 App.js
파일
//node_modules (using ES6 modules)
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
//others
import { Home } from './pages/Home.js';
import { Page1 } from './pages/Page1.js';
import { Page2 } from './pages/Page2.js';
//App variables
const { Content, Footer, Sider } = Layout;
class App extends Component {
render() {
return (
<Router>
<Layout>
<Sider>
//some code
</Sider>
<Layout>
<Header>
//some code
</Header>
<Content>
<Route exact path="/" component={Home}/>
<Route path="/page1" component={Page1}/>
<Route path="/page2" component={Page2}/>
</Content>
<Footer>
//some code
</Footer>
</Layout>
</Layout>
</Router>
);
}
}
export default App;