ログインページをReactJSのシングルページアプリケーション（SPA）から分離

Question

私はReactJSでシングルページアプリケーション（SPA）を開発しています。どうすればログインページを別のページに置くことができますか？

私は自分のアプリケーションのベースとしてcreate-react-appを使用しています、と私は現在、App.jsファイルの私のSPA用のテンプレート、および異なる.jsファイル内の各コンポーネントを定義しています：私はreact-router-domを使用していますなど、Page1.jsを、Page2.js （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; 

Answer 1

なお、

react-route-domでRouteは（別名上記ルータV4を反応させると）それがStatelessComponentたりすることができるだけでComponetですビューをレンダリングする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 

私はここで言及したいと思いますいくつかのポイントが

1. ありますが、私は<Switch>を追加し、それはあなたのアプリケーションのみから1つのビューをレンダリングしてくださいますように、1つまたは複数の<Route />が含まれていますRoute（<Route />は、URLと一致するパスに基づいて表示をレンダリングするコンポーネントに過ぎません）。したがって、<PageABC />を<Switch />にラップすると、バックグラウンドですべてのビューがレンダリングされます。
   参考：https://reacttraining.com/react-router/web/api/Switch
2. は、新しいコンポーネント<Main />を作成して試してみて、新たに作成された<Main />であなたの元<App />コンポーネントのレイアウトを包みます。 <Login />コンポーネントをログインページのレイアウトと一緒に作成する
3. メインコンテンツをログインページと分ける仕事をしますが、これはユーザーの認証には何もしません。基本的には、URLの/login、メインページの/にアクセスして、ログインページに自由にアクセスできます。あなたはが および無許可ルートを認定作成したい場合は、URLがどのルート・パスと一致しない場合、あなたはあなたのアプリケーションは、常にいくつかのビューをレンダリングすることを確認する<Redirect to="/somePublicUrl" />を追加することができて、このチュートリアルで必要に応じてAll About React Router 4
4. を確認することができます

私はそれが助けて欲しい何かがあなたの頭を包んでいないかどうか知らせてください。