Reactルーター：再ルーティング時にログインデータ（小道具）を保持する方法

React Routerアプリを作成していて、認証を学んでいます。ここにいくつかの部分があります：

ログインコンポーネント（login.jsx）

• バックエンドでユーザーの資格情報を認証します
• ローカルストレージに認証トークンを設定します
• 戻り値はユーザーのデータです
• データで状態を設定します
• 状態を管理コンポーネントに渡します

管理コンポーネント（admin.jsx）

• プライベートルートで保護されています（privateroute.jsxを参照）
• 基本的にコンテナコンポーネント
• ユーザーのデータをに渡し、データを表示/編集する他のコンポーネントをレンダリングします

ナビゲーションバーの認証ボタン（authbutton.jsx）

• ユーザーがログインしているかどうかを確認し、「ログイン」または「ログアウト」ボタンを表示します
• ログインしている場合は、管理者にルーティングする「マイ投稿」ボタンも表示されます

ログインから管理者まですべてうまく機能します。私の問題は、管理者ページ（ホームページなど）から離れてクリックし、[投稿]ボタンをクリックすると、管理者に再ルーティングされ、ログインしていることを認識しますが、ユーザーのデータは利用できなくなります。以前は、ログインコンポーネントから、ユーザーのデータはにありましたthis.props.location.state.me。

2つの異なるコンポーネントから管理者にルーティングしようとしているので、行き詰まりました。これまでに行ったことがありません。さらに、認証設定に欠けている解決策があるように感じます。

その他のアイデア：

ユーザーのデータが渡されたときに、条件付きで管理者に状態を設定する必要がありますか？

認証トークンを使用する場合と同じように、ブラウザのローカルストレージにデータを保存する必要がありますか？

Adminで状態を設定してデータをフェッチしようとしましたが、componentDidMount再レンダリングされなかったため、使用するために読み取りましたcomponentWillReceivePropsが、非推奨になり、に置き換えられていgetDerivedStateFromPropsます。それを理解できませんでした。

login.jsx

import React, { Component, Fragment } from 'react';
import * as userService from '../../services/user';
import { Redirect } from 'react-router-dom';
import IndeterminateProgress from '../utilities/indeterminateprogress';
import Nav from '../home/nav';

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            redirectToReferrer: false,
            email: '',
            password: '',
            feedbackMessage: '',
            checkingLogin: true,
            me: ''
        };
    }

    componentDidMount() {
        userService.checkLogin()
            .then((loggedIn) => {
                if (loggedIn) {
                    this.setState({ redirectToReferrer: true, checkingLogin: false });
                } else {
                    this.setState({ checkingLogin: false });
                }
            });
    }

    login(e) {
        e.preventDefault();
        userService.login(this.state.email, this.state.password)
            .then((meData) => {
                this.setState({ redirectToReferrer: true, me: meData })
            })  
            .catch((err) => {
                if (err.message) {
                    this.setState({ feedbackMessage: err.message });
                }
            });
    }

    handleEmailChange(value) {
        this.setState({ email: value });
    }

    handlePasswordChange(value) {
        this.setState({ password: value });
    }

    render() {
        const { from } = this.props.location.state || { from: { pathname: '/admin', state: { ...this.state } } };
        const { redirectToReferrer, checkingLogin } = this.state;

        if (checkingLogin) {
            return <IndeterminateProgress message="Checking Login Status..." />;
        }
        if (redirectToReferrer) {
            return (
                <Redirect to={from} />
            );
        }

        return (
            <Fragment>
                <Nav />
                <h2 className="heading center">Login to continue</h2>
                <form className="center" onSubmit={(e) => this.login(e)}>
                    <div className="form-group">
                        <input
                            placeholder="Email"
                            id="email"
                            className="col-3"
                            type="email"
                            onChange={(e) => this.handleEmailChange(e.target.value)}
                            required
                        />
                    </div>
                    <div className="form-group">
                        <input
                            placeholder="Password"
                            id="password"
                            className="col-3"
                            type="password"
                            onChange={(e) => this.handlePasswordChange(e.target.value)}
                            required
                        />
                    </div>
                    {this.state.feedbackMessage ? (
                        <p>{this.state.feedbackMessage}</p>
                    ) : null}
                    <input type="submit" value="Login" className="btn btn-info btn-sm" />
                </form>
            </Fragment>
        );
    }
}

export { Login };

admin.jsx

import React, { Component } from 'react';
import Nav from '../home/nav';
import AdminBlogContainer from './adminblogcontainer'
import { BrowserRouter as Router, Link } from 'react-router-dom';

const Admin = (props) => {
    return (
        <div className="flexcol center">
            <Nav />
            <h1 className="heading">Your Blog Posts</h1>
            <AdminBlogContainer {...props.location.state.me} />
            <Link to={{
                pathname: '/write',
                state: { ...props.location.state.me }
            }}
                className="btn btn-outline-secondary mt-4"
            >Create a New Blog Post</Link>
        </div>
    )
}

export { Admin };

privateroute.jsx

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { isLoggedIn } from '../../services/user';

const PrivateRoute = (props) => {
    const Component = props.component;
    const propsToPass = Object.assign({}, props);
    delete propsToPass.component;

    return (
        <Route {...propsToPass} render={props => (
            isLoggedIn() ? (
                <Component {...props} />
            ) : (
                <Redirect to={{
                    pathname: '/login',
                    state: { from: props.location }
                }} />
            )
        )} />
    );
};

export { PrivateRoute }

authbutton.jsx

import React from 'react';
import { Link } from 'react-router-dom';
import { isLoggedIn } from '../../services/user';

const AuthButton = (props) => {
    if (isLoggedIn()) {
        return (
            <div>
                <Link className="btn btn-info m-1" to="/logout">Logout</Link>
                <Link className='btn btn-info m-1' to={{
                    pathname: '/admin',
                    // state: { ...this.state }
                }}
                    >My Posts</Link>
            </div>
        );
    } else {
        return (
            <div>
                <Link className="btn btn-info m-1" to="/login">Login</Link>
                <Link className="btn btn-info m-1" to="/register">Register</Link>
            </div>
        )
    }
};

export { AuthButton };