在ReactJS中访问道具

Question

我正在我的react应用程序中创建一个登录组件，并将即时状态从登录页面传递到navbar组件。但是我似乎无法访问它。这就是我从登录表单设置状态的方式

 handleSubmit(e) {
    headers.set('Authorization', 'Basic ' + Buffer.from(this.state.username + ":" + this.state.password).toString('base64'));
    e.preventDefault();
    //   .then((e) =>
    //     this.props.router.push('/contact'))
    const data = new FormData(e.target);
    const response = fetch(url, {
        method: 'GET',
        headers: headers,
        //status:''
        //credentials: 'user:passwd'
    })
        .then(response => {
            console.log(response.status)
            if (response.status == 200) {
            //    this.setState({ logged: true })
                this.props.router.push({
                    pathname:'/',
                    state:{
                        logg:true,
                        username:this.state.username
                    }
                });
            } else {

                this.props.router.push("/contact");
            }
            return response.ok && response.json();

        })
       .catch(err => console.log('Error:', err));
}

这就是我尝试访问它的方式。

class NavBar extends Component {
constructor(props) {
super(props);
{
  this.state = {
    logg: this.props.location.state,
    groups: []
};
}
}

render() {
if (this.props.location.state.map(group => (group.logg) == true)) {
  return (
    <header className="header1">
      {/* Header desktop */}
      <div className="container-menu-header">
        <div className="topbar">
          <div className="topbar-social">.....

我尝试使用 this.props.location.state.logg 说“ logg”未定义

这就是我从登录页面调用NavBar组件的方式

<Navbar location={this.props.location}/>