react-routerでのログイン処理について

Question

react-routerでログイン処理を行いたい

現在react-routerにてログイン処理を実装しております。
下記のような形式で、ルートへのリクエストでAuthコンポーネントにアクセスし、
ログイン済みならTodoListコンポーネント、
ログインが未処理であればLoginコンポーネントにリダイレクトをしたいと考えております。
また全てのリクエストに共通でHeaderコンポーネントを表示したいです。

現在作成中のソースコード

class App extends Component {
render() {
		return (
			<div className="App">
				<Header />
				<Switch>
					<Route exact path="/" component={Auth} />		
					<Route path="/login" component={Login} />	
				</Switch>
           </div>
     );
  }
}

class Auth extends Component {
	render() {
		return(
　　　　　　　　　　　　//loggedはログインのフラグです。
			this.props.logged ?
				<Switch>
					<Route exact path="/" component={TodoList} />
				</Switch> : 
				<Redirect
                      to={{
                                pathname: "/login",
                                state: { from: this.props.location }
                      }}
				/>
		);
	}
}

class Login extends Component {
	render() {
		return(
			<div>
　　　　　　　　　　　　　　　　ログイン画面
			</div>
		);
	}
}

この形式ですと、直接"/login"URLにアクセスした場合はLoginコンポーネントが表示されますが、リダイレクト後ではHeaderコンポーネントのみしか表示がされません。
ルーティングの記載方法に誤りはありますでしょうか。
どうぞ宜しくお願い致します。

補足情報（FW/ツールのバージョンなど）

"react-router-dom": "^4.3.0-rc.3",

Answer 1

掲載されているコードが全ての必要なコードを含んでいないので、コードを実行して動作確認することが出来ません。

なので、代わりに簡易的なコードを書いてみたので参考までに置いておきます。

※ ログイン状態のようなアプリケーション全体にまたがる状態はReduxなどで管理したいところですが、とりあえず、簡易的にpropsの橋渡しで書いてみました。

→ アニメーションGIF

デモコード

→ https://codesandbox.io/s/r4wv8lnyv4

• ログインボタンを押すとログイン状態に切り替わり、メンバーページを表示可能になる。
• ログアウト状態の場合は、メンバーページにアクセスしてもHomeにリダイレクトされる。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch, Redirect, Link } from 'react-router-dom';

const Header = (props) => <div>Header</div>
const Home = ({ authenticate, isLoggedIn }) => {
  return (
    <div>
      <div>
        <p>You are now {isLoggedIn ? 'logged in!' : 'logged out!'}</p>
        <button onClick={authenticate}>
          { isLoggedIn ? 'Log out' : 'Log in'}
        </button>
      </div>
      <nav>
        <ul>
          <li><Link to='/member'>Member Page</Link></li>
        </ul>
      </nav>
    </div>
  )
}


const requireAuthentication = (WrappedComponent) => {
  return class EnhancedComponent extends Component {

    render() {
      if (this.props.isLoggedIn === false) {
        return <Redirect to={'/'} />
      } 

      return <WrappedComponent { ...this.props } />

    }
  }

}

const MemberPage = () => <h1>Member Page</h1>
const ProtectedMemberPage = requireAuthentication(MemberPage);

class App extends Component {

  state = {
    isLoggedIn: false
  }

  handleLogin = () => {
    this.setState((prevState) => {
      return {
        isLoggedIn: !prevState.isLoggedIn
      }
    })
  }

  render() {
    return (
      <div className="App">
        <Header />
        <BrowserRouter>
          <Switch>
            <Route exact path="/" render={(props) => <Home isLoggedIn={this.state.isLoggedIn} authenticate={this.handleLogin} />} />
            <Route path="/member" render={(props) => <ProtectedMemberPage isLoggedIn={this.state.isLoggedIn} {...props} />} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}


ReactDOM.render(
  <App />, 
  document.getElementById("root")
);

Comments

[gion1192]

ご回答ありがとうございました。
Router内にHeaderコンポーネントを含んでいたことがエラーの原因でした。
大変参考になりましたm(_ _)m