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

Question

我正在将 ReactJS 与 Material-UI 一起使用，这对我来说都是新手。

我有一个 AppBar 组件用作主 menu/navigation 栏。我希望 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>
    );

在我的构造函数中，我设置了 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 });
}

问题

这 'works'，但如果用户在浏览器上刷新或点击后退按钮，它会出现一些问题。

例如用户导航到 /login，标题更改为 "Login"，用户刷新浏览器。然后用户将在 /login 但标题将重置为 "Home".

后退按钮也有同样的问题。用户可以导航到登录，按返回键，标题将保持为 "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 then display login title' 不鼓励。告诉组件渲染什么而不是如何渲染。

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

AppBar contents are wrong after refresh or hitting back button

javascript

reactjs

redux

material-ui