control.path获取的路径始终为/

[zhan2016]

hi @vifird
非常感谢你们团队的工作，keeper帮了我的大忙! 现在我碰到一个问题，请教一下。
问题:
在退出登录后重新登录或刷新界面重新登录，导航栏停留在上次退出时的导航地址, 而使用Control.path获取到的地址始终为"/"


目标效果:
导航菜单的当前选定项(Menu->defaultSelectedKeys)和当前页面/URL是对应关系。短时间退出->重新登陆，仍然应该在当前操作页面延续工作.
相关代码:

console.log(Control.path);
        return(
            <React.Fragment>
                {
                    this.props.commonVariable.IsLoginStatus ? (
                            <Layout style={{scroll: 'hidden', height: '100%'}}>
                                <BackTop>
                                </BackTop>
                                <Header>
                                    <Menu
                                        theme="dark"
                                        mode="horizontal"
                                        defaultSelectedKeys={['1']}
                                        style={{lineHeight: '64px'}}
                                    >
                                        {console.log(Control.path)}
                                        <Menu.Item key="1" onClick={() => {
                                            Control.go("/");
                                            //if (this.props.location.pathname !== "/") this.props.history.push('/');
                                        }}>
                                            <Icon type="search"/> 检索
                                        </Menu.Item>
                                        <Menu.Item key="2" onClick={() => {
                                            //this.props.history.push('/industry')
                                            Control.go("/industry");
                                        }}>
                                            <Icon type="project"/> 课题
                                        </Menu.Item>
                                        <Menu.Item key="3">
                                            <Icon type="setting"/> 设置</Menu.Item>
                                        <Menu.Item key="4" onClick={() => {
                                            //this.props.history.push('/scandb')
                                            Control.go("/scandb");
                                        }}>
                                            <Icon type="global"/> 全库
                                        </Menu.Item>
                                        <div style={{display: 'inline-block', float: 'right'}}>
                                            <TaskStatus buttonStyle={{marginRight: '20px'}}/>
                                            <Dropdown overlay={userDownloadList} handleClick={this._userProfileClick}>
                                                <a className="ant-dropdown-link" href="#">
                                                    {`Hello, ${this.props.commonVariable._USERINFO.userName}`}
                                                </a>
                                            </Dropdown>
                                        </div>
                                    </Menu>
                                </Header>
                                <Layout>

                                    <Content style={{overflow: 'hidden', flex: '1 1 0', backgroundColor: 'white'}}>
                                        <HashRouter>
                                            <div>
                                                <Route cache={'parent'} path='/' component={JLSearchResultTileData} key={'searchresult'} />
                                        
                                            <Route cache={'parent'} path='/industrydetail/:industryID' component={JLViewIndustry} key={'JLViewIndustry'}/>
                                            <Route cache={'root'} path='/newindustry' component={JLNewIndustry} key={'JLNewIndustry'}/>
                                            </div>
                                        </HashRouter>

                                    </Content>

                                </Layout>
                            </Layout>
                        ) :
                        <div>
                            <header className={"headerbackGround"}>
                                <div style={{zIndex: '999'}}>
                                    <JLLoginPage/>
                                </div>
                            </header>

                        </div>
                }
            </React.Fragment>
        );

[lanistor]

退出登录、登录成功，这两个是怎么实现页面跳转的？
登录时的URL是什么？
信息有点少，还判断不出问题。

[zhan2016]

退出登录和登录成功都是更改了state的一个状态-->IsLoginStatus. 这时候上面的代码就分别返回不同的组件. 登录不是用URL跳转的，是返回了登录组件.

[lanistor]

path的读取依赖于HashRouter的实例对象，上面代码在访问Control.path的时候，HashRouter还没有初始化。修复的方式：

1. 将HashRouter的Layout放在最上面，或者使用HashRouter包裹其他组件
2. 不要在引用HashRouter的组件里调用Control.path，因为这样Control.path的读取会先于HashRouter的初始化，所以读不到path。可以在Menu.Item，Menu组件内部使用Control.path

[zhan2016]

谢谢你提供的信息。 我将hashRoute直接提升到登录以后界面的最外层，然后在menu.item的内层去访问path，仍然得到了"/"（*** ****之间为新加入的代码）

console.log(Control.path);
        return(
            <React.Fragment>
                {
                    this.props.commonVariable.IsLoginStatus ? (
                              ***<HashRouter>***
                            <Layout style={{scroll: 'hidden', height: '100%'}}>
                                <BackTop>
                                </BackTop>
                                <Header>
                                    <Menu
                                        theme="dark"
                                        mode="horizontal"
                                        defaultSelectedKeys={['1']}
                                        style={{lineHeight: '64px'}}
                                    >
                                        {console.log(Control.path)}
                                        <Menu.Item key="1" onClick={() => {
                                            {console.log(Control.path)}   ***输出为/***
                                            Control.go("/");
                                            //if (this.props.location.pathname !== "/") this.props.history.push('/');
                                        }}>
                                            <Icon type="search"/> 检索
                                        </Menu.Item>
                                        <Menu.Item key="2" onClick={() => {
                                            //this.props.history.push('/industry')
                                            Control.go("/industry");
                                        }}>
                                            <Icon type="project"/> 课题
                                        </Menu.Item>
                                        <Menu.Item key="3">
                                            <Icon type="setting"/> 设置</Menu.Item>
                                        <Menu.Item key="4" onClick={() => {
                                            //this.props.history.push('/scandb')
                                            Control.go("/scandb");
                                        }}>
                                            <Icon type="global"/> 全库
                                        </Menu.Item>
                                        <div style={{display: 'inline-block', float: 'right'}}>
                                            <TaskStatus buttonStyle={{marginRight: '20px'}}/>
                                            <Dropdown overlay={userDownloadList} handleClick={this._userProfileClick}>
                                                <a className="ant-dropdown-link" href="#">
                                                    {`Hello, ${this.props.commonVariable._USERINFO.userName}`}
                                                </a>
                                            </Dropdown>
                                        </div>
                                    </Menu>
                                </Header>
                                <Layout>

                                    <Content style={{overflow: 'hidden', flex: '1 1 0', backgroundColor: 'white'}}>
 
                                            <div>
                                                <Route cache={'parent'} path='/' component={JLSearchResultTileData} key={'searchresult'} />
                                        
                                            <Route cache={'parent'} path='/industrydetail/:industryID' component={JLViewIndustry} key={'JLViewIndustry'}/>
                                            <Route cache={'root'} path='/newindustry' component={JLNewIndustry} key={'JLNewIndustry'}/>
                                            </div>


                                    </Content>
                                </Layout>
                            </Layout>
                                        </HashRouter>
                        ) :
                        <div>
                            <header className={"headerbackGround"}>
                                <div style={{zIndex: '999'}}>
                                    <JLLoginPage/>
                                </div>
                            </header>

                        </div>
                }
            </React.Fragment>
        );

[zhan2016]

最后，我在mobx的状态切换里面. 在修改状态之前，使用control.go('/')到首页, 生效了.

[lanistor]

这个引用方式不算是在Menu的内层，因为是在创建Menu示例之前读取的Control.path，如果写在Menu组件里面（生命周期方法内）是OK的。

<Menu
                                        theme="dark"
                                        mode="horizontal"
                                        defaultSelectedKeys={['1']}
                                        style={{lineHeight: '64px'}}
                                    >
                                        {console.log(Control.path)}
                                        <Menu.Item key="1" onClick={() => {
                                            {console.log(Control.path)}   ***输出为/***
                                            Control.go("/");
                                            //if (this.props.location.pathname !== "/") this.props.history.push('/');
                                        }}>