未调用componentDidMount导致在React应用程序中导致受保护路由的无限循环

Question

我的目标是在我的React应用程序中设置受保护的路由。我遵循了类似于https://reacttraining.com/react-router/web/example/auth-workflow的各种示例，这意味着我将自己的路由（SecureRoute）放在适当的位置，该路由返回一个Route，该Route是所请求的组件或重定向到登录页面。

我在App.js中具有componentDidMount函数，以检查用户是否已登录-如示例所示，我设置了传递给SecureRoute函数的状态变量。我将“从”传递给“登录名”，以便可以将用户重定向到他们请求的页面-全部如图所示。问题是，不会再次调用App.js中的componentDidMount，因此，当用户重定向到请求的页面时，状态变量从构造函数中设置为false，并且用户最终返回登录页面...但实际上已登录（我的标头显示的是）。

我试图通过重定向从登录中传回道具，但我似乎无法在App内的SecureRoute函数中访问它们。

在Login的呈现中：

if (this.state.loginSuccess) {
return(<Redirect to={{ pathname: from.pathname, state: 
{authenticated: true }}} />);
}

在App.js中：

<SecureRoute exact path='/Profile' component={Profile} 
authenticated={this.state.loggedin}/>

function SecureRoute({component: Component, authenticated, ...rest}) 
{
    // How do I both check against authenticated var and against the  state from login?
}

似乎没有一个例子可以解决这个问题。我最终回到登录页面或无限循环。我意识到解决方案之一可能是redux ...我还没有学到，对于我的用例来说可能太重了。非常感谢您能提供的任何帮助。