1

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; 

답변

2

당신의 코드로 점프하기 전에 다음 사항을 유의

Route react-route-dom에 (일명 위의 라우터 V4와 반응) 인 단지 Componet이 StatelessComponent 될 수있다 또는 뷰를 렌더링하는 ComponentClass입니다. 당신은 당신의 질문에
https://reacttraining.com/react-router/web/guides/philosophy

,

이 가
가 당신이 의미가 있다면 별도의 페이지

에 내가 로그인 페이지를 수있는 방법을 알고 싶습니다

당신이 원하는, 여기에서 참조 할 수 있습니다 Layout없이 Login보기를 렌더링하면 다음과 같이 할 수 있습니다.

앱 된 .js 내가 여기서 언급하고자하는 몇 가지 포인트가 있습니다

import Main from './Main'; // Your original <App /> page 
import Login from './Login'; // Your new <Login /> page 

// In your App component 

<Router> 
    <Switch> 
    <Route exact path="/" component={Main} /> 
    <Route path="/login" component={Login} /> 
    </Switch> 
</Router> 

// Export your App component 

, 내가 하나가 있는지 확인하여 응용 프로그램을 만들 것입니다으로 하나 이상의 <Route /> 만에서 하나 개의보기 렌더링을 포함 <Switch> 추가

  1. Route (<Route />은 URL과 일치하는 경로를 기반으로보기를 렌더링하는 구성 요소입니다). 따라서 <PageABC /><Switch />으로 감쌀 수 있습니다. 그렇지 않으면 백그라운드에서 모든보기가 렌더링됩니다.
    참조 : https://reacttraining.com/react-router/web/api/Switch
  2. 새로운 구성 요소 <Main />을 만들 시도하고 새로 만든 <Main />에 원래 <App /> 구성 요소 배치를 바꿈. 로그인 페이지 레이아웃과 함께 <Login /> 구성 요소를 만듭니다.
  3. 메인 콘텐츠를 로그인 페이지와 구분하는 작업을 수행하지만 사용자를 인증하는 작업은 수행하지 않습니다. 기본적으로 URL의 /login을 방문하고 메인 페이지의 /을 URL로 방문하여 로그인 페이지로 자유롭게 이동할 수 있습니다. 당신이 이 과 허가받지 않은 경로를 공인 만들려면 URL이 어떤 경로 경로와 일치하지 않는 경우 당신은 당신이 당신의 앱이 항상 몇 가지보기를 렌더링 확인 <Redirect to="/somePublicUrl" />을 추가 할 수 있습니다 아웃이 튜토리얼 선택적으로 All About React Router 4
  4. 을 확인할 수 있습니다

나는 그것이 도움이되기를 바랍니다. 머리가 감겨지지 않으면 알려줘.