当我刷新页面时反应状态是否改变

Question

`class App extends React.Component {
  constructor() {
    super();
    this.sideBarToggleHandler = this.sideBarToggleHandler.bind(this);
    this.state = {
      sideBarOpen: true,
      backDropOpen: false,
      isPrim: true,
    }
  }
  componentDidMount() {
    console.log('componentdidmount')
  }

  sideBarToggleHandler = () => {
    this.setState((prevState) => {
      return { sideBarOpen: !prevState.sideBarOpen }
    })

    this.setState((prevState) => {
      return { backDropOpen: !prevState.backDropOpen }
    })
  }

  changeTheme = () => {
    this.setState((prevState) => {
      return { isPrim: !prevState.isPrim }
    })
  }

  render() {
    let backDrop;

    if (this.state.backDropOpen) {
      backDrop = <SideDrop />
    }

    return (
      <div className="App">
        <SimpleBar style={{ height: '100vh' }}>

          <ThemeSwitcher changeTheme={this.changeTheme} />

          <ToggleBar sideBarToggleHandler={this.sideBarToggleHandler} />

          {backDrop}

          <SideBar sideBarOpen={this.state.sideBarOpen} />

          <Switch>
            <Route exact path='/' component={HomePage} />
            <Route exact path='/about' render={() => <AboutPage isPrim={this.state.isPrim} />} />
            <Route exact path='/resume' render={() => <ResumePage isPrim={this.state.isPrim} />} />
            <Route exact path='/portfolio' component={PortfolioPage} />
            <Route exact path='/blog' component={BlogPage} />
            <Route exact path='/contact' component={ContactPage} />
          </Switch>
        </SimpleBar>
      </div>
    );
  }
}`

我想根据状态对象更改我的网站的主题，但是当第一次更改主题并导航到另一个页面组件时，它会变回原始主题，我添加了我的应用程序组件代码它对页面使用反应路由器

Answer 1

React 状态只存在于前端，这意味着每次刷新页面时都会创建一个新状态。您可以使用 React router 来避免在页面之间丢失状态，它会在不实际刷新站点的情况下处理您的多页。
您还可以使用本地存储来存储您的状态：https://*.com/a/28314706,
虽然我会做这两件事

Answer 2

通常刷新时无法保存状态值，您可以将其保存在本地存储中。如果您使用其中一个路由库页面不应该刷新。