Javascript ReactJs-使用默认visual studio示例应用程序将状态传递到路由

我对ReactJs完全不熟悉，所以尝试学习最佳实践。我使用的是通过VisualStudio创建的默认react项目，它有路由设置和三个选项卡，Home、Counters和FetchData

我在Counters类中有一些状态-当在特定页面上按需要编辑时，它会重置为初始状态，而不是更改的状态

有人能解释为什么会这样吗？每次单击选项卡时，它似乎都会碰到render方法，我想这意味着它每次都会创建一个新实例，而不是重复使用。有什么办法可以解决这个问题吗

我还试图将一些状态信息传递给counters类，这是否可能与路由有关

export class Layout extends React.Component<LayoutProps, {}> {

    state = {
        counters: [
            new CounterObject(1, 4),
            new CounterObject(2, 0),
            new CounterObject(3, 1)
        ]
    }

    public render() {
        return <div className='container-fluid'>
            <div className='row'>
                <div className='col-sm-3'>
                    <NavMenu />
                </div>
                <div className='col-sm-9'>
                    <Route exact path='/' component={Home} />
                    <Route path='/counter' component={Counters} />
                    <Route path='/fetchdata' component={FetchData} />
                </div>
            </div>
        </div>;
    }
}

导出类布局扩展React.Component{
状态={
计数器：[
新的反对象（1，4），
新的计数器对象（2，0），
新的反对象（3，1）
]
}
公共渲染（）{
返回
;
}
}

当路由发生变化且不再使用时，该组件将被卸载，然后当您返回时，将再次装载一个新实例。因此，组件中的状态将重置

如果要将道具传递给管线组件，可以使用

渲染

道具而不是

组件

道具

示例

export class Layout extends React.Component<LayoutProps, {}> {
  state = {
    counters: [
      new CounterObject(1, 4),
      new CounterObject(2, 0),
      new CounterObject(3, 1)
    ]
  };

  render() {
    return (
      <div className="container-fluid">
        <div className="row">
          <div className="col-sm-3">
            <NavMenu />
          </div>
          <div className="col-sm-9">
            <Route exact path="/" component={Home} />
            <Route
              path="/counter"
              render={() => <Counters counters={this.state.counters} />}
            />
            <Route path="/fetchdata" component={FetchData} />
          </div>
        </div>
      </div>
    );
  }
}

导出类布局扩展React.Component{
状态={
计数器：[
新的反对象（1，4），
新的计数器对象（2，0），
新的反对象（3，1）
]
};
render（）{
返回(
}
/>
);
}
}

Brilliant感谢您的回复，我已经尝试过进行此渲染，但是我得到一个错误（TS）类型“{}不可分配给类型”Readonly，有什么想法吗？@user3284707不客气！我从未将React Router与TypeScript一起使用过，所以恐怕我不知道。另一方面，有没有一种方法可以使它不卸载，从而保持状态不变？@user3284707我认为没有。如果希望在页面更改之间保持某些状态，则必须将其放入父组件中并作为道具传递，或者使用类似或的状态管理库。