Authentication 如何设置React路由器身份验证流？

我是React新手，在使用GraphQL创建简单的身份验证流时遇到了困难，下面是React路由器示例

我希望

/

成为我的登录屏幕，它仅在用户注销时显示。如果没有，应用程序应重定向到

/仪表板
（否则将无法访问）。以下是我所拥有的，它在身份验证后生成一个无限循环：

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            authenticated: false
        }
    }

    renderButtons () {
        if (this.state.authenticated) {
            return (
                <a>Logout</a>
            )
        }
        return null;
    }

    componentWillReceiveProps({ data }) {
        if (this.props.data.loading && !data.loading) {
            if (data.loggedInUser.id && !this.state.authenticated) {
                this.setState({authenticated: true});
            } else if (this.state.authenticated) {
                this.setState({authenticated: false});
            }
        }
    }

    render () {
        return (
            <div className="container">
                <nav>
                    {this.renderButtons()}
                </nav>
                <GatingRoute path="/" component={LoginPage} isAuthenticated={this.state.authenticated} newPath="/dashboard" />
                <PrivateRoute path="/dashboard" component={Dashboard} isAuthenticated={this.state.authenticated} />
            </div>
        );
    }
};

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest}) => (
    <Route
      {...rest}
      render={props => (
        isAuthenticated
        ? (
           <Component {...props} />
        )
        : (<Redirect to={{ pathname: '/', state: { from: props.location } }} />)
      )}
    />
    );

const GatingRoute = ({ component: Component, isAuthenticated, newPath, ...rest}) => (
    <Route
      {...rest}
      render={props => (
        isAuthenticated
        ? (
            (<Redirect to={{ pathname: newPath, state: { from: props.location } }} />)
        )
        : 
        <Component {...props} />
      )}
    />
    );

export default graphql(query, { options: {fetchPolicy: 'network-only'}})(withRouter(App));

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
认证：假
}
}
渲染按钮（）{
if（this.state.authenticated）{
返回(
注销
)
}
返回null；
}
componentWillReceiveProps（{data}）{
if（this.props.data.loading&！data.loading）{
if（data.loggedInUser.id&&！this.state.authenticated）{
this.setState（{authenticated:true}）；
}else if（this.state.authenticated）{
this.setState（{authenticated:false}）；
}
}
}
渲染（）{
返回(
{this.renderButtons（）}
);
}
};
const PrivateRoute=（{component:component，isAuthenticated，…rest}）=>(
(
认证
? (
)
: ()
)}
/>
);
const GatingRoute=（{component:component，isAuthenticated，newPath，…rest}）=>(
(
认证
? (
()
)
: 
)}
/>
);
导出默认graphql（查询，{选项：{fetchPolicy:'仅网络'}}}）（withRouter（App））；
而不是像现在这样工作

在有管线的父组件中，执行以下操作

<BrowserRouter>
    <Route path=“/“ exact         render={ ( props ) =>
 props.user.loggedIn ? <Dashboard /> : <LoginForm />
}/>
</BrowserRouter>


props.user.loggedIn？：
}/>

这假设呈现路由器的组件知道用户状态

我为手机上糟糕的格式表示歉意
 这实际上对我不起作用，因为我不确定如何从父对象到路由获取身份验证道具。然而，您用动态JSX启发了这种方法，它确实有效：
renderRoute（）{if（this.state.authenticated）{return（）}else{return（）}
只要找到适合您的方法，我很高兴。