web-dev-qa-db-ja.com

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

ReactJSでシングルページアプリケーション（SPA）を開発していますが、ログインページを別のページに配置する方法を知りたいのですが。

アプリケーションのベースとして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;
reactjsloginreact-routersingle-page-applicationreact-router-dom
9
Julia

コードにジャンプする前に、次のことに注意してください。

react-route-dom（別名react router v4以降）のRouteは単なるComponentであり、ビューをレンダリングするのはStatelessComponentまたはComponentClassの場合があります。ここで参照できます、
https://reacttraining.com/react-router/web/guides/philosophy

あなたの質問では、

ログインページを別のページにするにはどうすればよいですか？

LoginなしでLayoutビューをレンダリングしたい場合は、この方法を使用することをお勧めします。

inApp.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. アプリがRouteから1つのビューのみをレンダリングするようにするため、1つまたは複数の<Switch>を含む<Route />を追加します（<Route />はビューをレンダリングするコンポーネントにすぎないことに注意してくださいurlとの一致するパスに基づきます）。したがって、<PageABC />を<Switch />でラップすることをお勧めします。そうしないと、すべてのビューがバックグラウンドでレンダリングされます。
    参照： https://reacttraining.com/react-router/web/api/Switch
  2. 新しいコンポーネント<Main />を作成し、元の<App />コンポーネントレイアウトを新しく作成された<Main />でラップしてみてください。ログインページのレイアウトを使用して、<Login />コンポーネントも作成します
  3. それはあなたのメインコンテンツをあなたのログインページと分離する仕事をしますが、これはユーザーを認証するために何もしません。基本的には、URLの/loginにアクセスしてログインページに自由に移動し、URLの/でメインページに戻ることができます。 承認済みおよび未承認ルートを作成する場合は、このチュートリアルを確認できます All About React Router 4
  4. オプションで、<Redirect to="/somePublicUrl" />を追加して、URLがどのルートパスとも一致しない場合にアプリが常に何らかのビューをレンダリングするようにすることができます

お役に立てば幸いです。何かがあなたの頭を包まないならば、私に知らせてください。

8
loala.js