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

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

我想创建一个代表这个选项卡的交换机组件,并根据当前路由器状态用与用户相关的信息呈现另一个组件。主要的困难在于子组件是有状态的——它们已经可以包含用户输入的一些文本。我试图用简单的 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> 每次用户切换到另一个链接时重新创建。

在这种情况下,如何保存组件的状态?