Javascript 刷新或点击后退按钮后AppBar内容错误

我将ReactJS与Material UI一起使用，这对我来说都是全新的

我有一个用作主菜单/导航栏的组件。我希望AppBar组件的标题能够反映我所在的页面。因此，如果我按下一个将用户路由到/login的按钮，我还想将AppBar组件的标题更改为“login”。我已经做到了这一点，但似乎有一些副作用，所以我怀疑这是正确的做法

目前，我的AppBar组件看起来是这样的：

render() {
    let MenuOptionsNotLogged = ({}) => (
        <div>
            <FlatButton
                label="Log In"
                containerElement={<Link to="/login" />}
                secondary
                linkButton
                onClick={this.switchToLogin}
            />
        </div>
    );
    return (
        <div>
            <MuiThemeProvider muiTheme={muiTheme}>
                <div className="headerDiv">
                    <AppBar
                        className="appBar"
                        showMenuIconButton={this.state.appBarIcon}
                        title={this.state.appBarTitle}
                        iconElementRight={<MenuOptionsNotLogged />}
                        iconElementLeft={<IconButton><BackIcon /></IconButton>}
                    />
                </div>
            </MuiThemeProvider>
        </div>
    );

然后我有一个功能，当用户导航到登录页面时，可以更改标题和图标：

switchToLogin() {
    this.setState({ appBarTitle: 'Log in' });
    this.setState({ appBarIcon: true });
}

问题

这“有效”，但如果用户刷新或点击浏览器上的后退按钮，则会出现一些问题

例如，用户导航到/登录，标题更改为“登录”，用户刷新浏览器。然后用户将打开/登录，但标题将重置为“主页”

---

后退按钮也有同样的问题。用户可以导航到login，按back，标题将保留为“login”，而不是“Home”

我看到您有一个

链接

组件。我的回答假设您使用

react路由器

问题是您的

appBarTitle

状态与当前路线的映射不正确。 此外，当用户刷新浏览器时，组件的

状态将重置

如果未使用
reat router 3.0
，则可以通过
this.context.location.pathname
访问当前路由。您需要阅读如何使用
上下文

然后，您可以编写一个帮助函数，将路径名映射到要显示的文本：
'/login'->'login'、'/'->'Home'

然后，
AppBar
的
title
就可以是helper函数返回的值。您不再需要将它的一部分保存在状态中

只是补充一点，与您的问题无关，Reactjs是一种声明式编程风格，这意味着不鼓励使用“switchToLogin然后显示登录标题”。告诉组件要渲染什么而不是如何渲染。
我看到您有一个
链接
组件。我的回答假设您使用
react路由器

问题是您的
appBarTitle
状态与当前路线的映射不正确。
此外，当用户刷新浏览器时，组件的
状态将重置

如果未使用
reat router 3.0
，则可以通过
this.context.location.pathname
访问当前路由。您需要阅读如何使用
上下文

然后，您可以编写一个帮助函数，将路径名映射到要显示的文本：
'/login'->'login'、'/'->'Home'

然后，
AppBar
的
title
就可以是helper函数返回的值。您不再需要将它的一部分保存在状态中

只是补充一点，与您的问题无关，Reactjs是一种声明式编程风格，这意味着不鼓励使用“switchToLogin然后显示登录标题”。告诉组件要呈现什么而不是如何呈现。
@Rolodecks“如果未定义
contextTypes
，则上下文将是一个空对象。”[.要修复它，请为组件定义
contextTypes
。
router
可以只是一个object@xiafan2406，我为这两个路由器定义了contextTypes，如下所示：
MenuBar.contextTypes={router:React.PropTypes.object.isRequired}
但似乎仍然存在问题，是否正确？编辑：未捕获类型错误：无法读取的属性“pathname”undefined@Rolodecks，我的错误，对于最新稳定版本的
react路由器
（2.5.2）应该是
this.context.location.pathname
。我已经修改了我的answer@xiafan2406谢谢。应该在contextTypes中将“location”定义为对象吗？谢谢您的帮助。我创建了一个helper函数，该函数根据
this.context.location.pathname的值返回正确的标题，但我不清楚如何当我转到其他屏幕时，获取要更新的组件。如果我导航到
/login
，除非我刷新页面，否则标题仍将设置为“主页”。@Rolodecks“如果未定义
contextTypes
，则上下文将是空对象。”引用自[react docs][.要修复它，请为组件定义
contextTypes
。
router
可以只是一个object@xiafan2406，我为这两个路由器定义了contextTypes，如下所示：
MenuBar.contextTypes={router:React.PropTypes.object.isRequired}
但似乎仍然存在问题，是否正确？编辑：未捕获类型错误：无法读取的属性“pathname”undefined@Rolodecks，我的错误，对于最新稳定版本的
react路由器
（2.5.2）应该是
this.context.location.pathname
。我已经修改了我的answer@xiafan2406谢谢。应该在contextTypes中将“location”定义为对象吗？谢谢您的帮助。我创建了一个helper函数，该函数根据
this.context.location.pathname的值返回正确的标题，但我不清楚如何当我转到其他屏幕时，获取要更新的组件。如果我导航到
/login
，除非我刷新页面，否则标题仍将设置为“主页”。
switchToLogin() {
    this.setState({ appBarTitle: 'Log in' });
    this.setState({ appBarIcon: true });
}