javascript - 刷新或按后退按钮后 AppBar 内容错误

Question

我正在将 ReactJS 与 Material-UI 结合使用，我对使用这两个产品都很陌生。

我有一个AppBar用作主菜单/导航栏的组件。我希望 AppBar 组件的标题能够反射(reflect)我所在的页面。因此，如果我按下将用户路由到/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>
    );

在我的构造函数中，我设置了 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 状态未与当前路由正确映射。 此外，当用户刷新浏览器时，组件的状态也会重置。

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

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

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

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