ほぼログ専門

まずはログインしていない場合はリダイレクトさせる処理から

// Auth.js
import React from 'react';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';

class Auth extends React.Component {
  render() {
    return this.props.user ? this.props.children : <Redirect to={{ pathname: '/', state: { referrer: this.props.location } }} />;
  }
}

export default withRouter(Auth);

上で作ったAuthコンポーネントで認証後に遷移したいRouteを囲む。

this.props.userがfalseの場合は、/へリダイレクトするように

<Auth user={user}>
    <Route path="/main" component={Main} />
</Auth>

ログインのonSubmitなどで下記の実装をすれば、リダイレクトする前のページに戻る

if (this.props.location.state && this.props.location.state.referrer) {
    // friendry forwarding
    this.props.history.push(this.props.location.state.referrer);
} else {
    this.props.history.push('/main');
}

このログへのコメント

コメントはありません