在 React 路由器中使用有状态组件

Question

想象一下带有标签的应用程序，它允许用户在用户可以输入不同信息的不同区域之间切换。

我想创建一个表示此选项卡的开关组件，并根据当前路由器状态呈现具有用户相关信息的另一个组件。主要困难在于子组件是有状态的——它们已经可以包含用户输入的一些文本。我尝试通过以下方式用简单的react-router 实现这个组件：

class Application extends React.PureComponent {
    public render(): React.ReactNode {
        const items = ["A", "B", "C"];
        return (
            <div>
                <header>
                    <ul>
                        {items.map((item, i) =>
                            (<li key={i}>
                                <Link to={"/" + item}>{item}</Link>
                            </li>))
                        }
                    </ul>
                </header>
                <SwitchComponent items={items}/>
            </div>
        );
    }
}

class SwitchComponent extends React.PureComponent<{items: string[]}> {
    public render(): React.ReactNode {
        const { items } = this.props;
        return (
            <Switch>
                {items.map((item, index) =>
                    <Route key={index} path={"/" + item} render={
                        () => (<StatefulComponent {...item}/>)
                    }/>)
                }
            </Switch>
        );
    }
}

class StatefulComponent extends React.PureComponent<{}, {text: string}> {
    public state = {
        text: "",
    };
    public onChange(text: string) {
        this.setState({text});
    }
    public render(): React.ReactNode {
        const { text } = this.state;
        return (
            <input value={text} onChange={
                (event) => this.onChange.bind(this)(event.target.value)}
            />
        );
    }
}

这里我实现了一个简单的Application 组件，其中包含通过<Link> 组件实现的导航区域和包含路由切换的内容区域。

此实现不会保留<StatefulComponent> 状态，因为每次用户切换到另一个链接时都会重新创建<SwitchComponent>。

在这种情况下，如何保留组件的状态？

Answer 1

你不能。 React路由器卸载不需要的<Route>组件（不匹配的组件，使用react-router时只挂载一个<Route>组件）。