为什么在使用“react-router”在页面之间切换时功能反应组件中的状态会重置

Question

为什么使用 react-router 在页面之间切换时，反应组件中的状态会重置？

据我了解，只要您使用 'react' 更改方式，您就应该能够使用 react-router 在路由（组件）之间切换，即。 <Link to="/otherRoute" />。我不是这种情况，我不明白为什么。这是代码：

App.js


import RoutesComp from "./RoutesComp";
import { Link } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <p>
        <Link to="/state">State</Link>
      </p>
      <p>
        <Link to="/dummy">dummy</Link>
      </p>
      <RoutesComp />
    </div>
  );
}

export default App;

StateComp.js

import React, { useState } from "react";

const StateComp = () => {
  const [counter, setCounter] = useState(0);

  return (
    <>
      <button onClick={() => setCounter((prev) => prev + 1)}>click to increment</button>
      <p>{counter}</p>{" "}
    </>
  );
};

export default StateComp

RoutesComp.js

import React from "react";

import { Route, Switch } from "react-router-dom";
import StateComp from "./StateComp";
import Dummy from "./Dummy";

const RoutesComp = (props) => {
  return (
    <>
      <Switch>
        <Route path="/state" render={() => <StateComp />} />
        <Route path="/dummy" render={() => <Dummy />} />

// I also tried it the original way
        {/* <Route path="/state">
          <StateComp />
        </Route>
        <Route path="/dummy">
          <Dummy />
        </Route> */}
      </Switch>
    </>
  );
};

export default RoutesComp;

这会产生以下结果：

当您点击递增按钮时，计数增加，但是当您转到 'dummy' 页面并返回 'state' 页面时，计数器再次为 0。

根据我的研究， react router difference between component and render 如果您使用

创建路由，状态似乎会被重置

<Route path="/state">
    <StateComp />
</Route>
<Route path="/dummy">
    <Dummy />
</Route>

但是，让状态不被重置的方法似乎是使用render={() => <Comp/>}。我也试过了，但没用。

任何人都可以提供一些关于我做错了什么的见解吗？

编辑： Dependencies/Versions

"dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"

Answer 1

Switch 组件只渲染一条路线，最早的匹配者获胜。路由不匹配的组件全部卸载

为避免这种情况，您需要将 Route 组件移到 Switch 组件之外，并使用 children 属性渲染您的组件。

下面是一个实现上述方法的示例：example codesandbox link

其他一些解决方法包括：

使用 redux 或 useContext 提升您的状态 API
使用url参数来存储状态（不适用于复杂的组件）

有用的链接：

为什么在使用“react-router”在页面之间切换时功能反应组件中的状态会重置

Why does the state reset in functional react component when changing between pages using `react-router`

reactjs

react-router

use-state