刷新或点击返回按钮后 AppBar 内容错误

Question

我正在将 ReactJS 与 Material-UI 一起使用，我对它都很陌生。

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

目前，我的 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>
    );

在我的构造函数中，我设置了 AppBar 的默认状态（标题和图标）：

constructor(props, context) {
    super(props, context);
    this.switchToLogin = this.switchToLogin.bind(this);

    this.state = {
        appBarTitle: 'Home',
        appBarIcon: false
    };
}

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

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

问题

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

例如用户导航到 /login，标题更改为“登录”，用户刷新浏览器。然后用户将在 /login 上，但标题将重置为“Home”。

返回按钮也有同样的问题。用户可以导航到登录，按返回，标题将保持为“登录”而不是“主页”

Answer 1

我看到你有一个Link 组件。我的回答假设您使用react-router。

问题是您的appBarTitle 状态未正确映射到当前路由。 此外，当用户刷新浏览器时，组件的state 也会重置。

如果您不使用reat-router 3.0，您可以通过this.context.location.pathname 访问当前路由。您需要了解如何使用 context here。

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

那么你的AppBar 的title 可以只是辅助函数返回的值。您不再需要在状态中保留它。

只是补充一点，与您的问题无关，Reactjs 是一种声明式编程风格，这意味着不鼓励使用“switchToLogin 然后显示登录标题”。告诉组件要渲染什么而不是如何渲染。