页面切换时为什么状态会改变？

这是因为在React中，每当组件状态变化时就会进行重新渲染。如果你使用了React Router来进行页面切换，那么切换页面就会导致React重新渲染并且更新组件的状态。为了防止这种情况发生，可以使用React的Context API来跨页面共享数据。下面是一个示例：

首先，创建一个Context来存储共享的状态：

import { createContext } from 'react';

export const StateContext = createContext();

然后，在App.js中使用StateContext.Provider包裹页面组件：

import { StateContext } from './StateContext';
import { useState } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  const [state, setState] = useState(null);

  return (
    <StateContext.Provider value={[state, setState]}>
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Router>
    </StateContext.Provider>
  );
}

现在，在你的页面组件中，可以使用useState和useContext来访问和更新状态：

import { StateContext } from './StateContext';
import { useContext } from 'react';

function Home() {
  const [state, setState] = useContext(StateContext);

  const handleClick = () => {
    setState('Clicked!');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleClick}>Click me</button>
      {state && <p>{state}</p>}
    </div>
  );
}

export default Home;

在这个示例中，当你在Home页面点击按钮时，它会触发setState函数并且更新共享状态。因为状态是跨页面共享的，所以在这个场景里，从Home到About的路由切换不会导致状态的重新渲染。

请注意，这种方法只