Я разрабатываю одностраничное приложение (SPA) в ReactJS и хотел бы знать, как разместить страницу входа на отдельной странице.
Я использую create-react-app
в качестве основы для своего приложения, и в настоящее время я определяю шаблон для своего SPA в файле App.js
и каждый компонент в другом файле .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;