如何使用 react-router-dom 卸载路由更改上的组件而不是重新渲染 [重复]

Question

更新：这个问题与重复问题有何不同？

这里我们有相同的组件被 2 个不同的路由渲染。 在另一个问题中，OP 想知道如何重新安装一个被相同的路由一遍又一遍渲染的组件，只需更改路由参数即可。

链接：Component does not remount when route parameters change

---

我在ProductSearch 组件上有以下情况。

它可能被两个不同的<Route>'s渲染：

它们都显示ProductSearch页面，并带有相应产品的过滤器。

<Route exact path='/category/:slug' component={ProductSearchContainer}/>
<Route exact path='/search/:slug' component={ProductSearchContainer}/>

第一个发生在您点击产品类别菜单时：

• 因此结果已经在特定类别中。
• 然后它会显示特定于该产品类别的过滤器。

第二个发生在您使用带有一些文本的 SearchBar 搜索产品时。

• 您还没有进入某个类别，因此它只显示通用过滤器，例如Price、Brand、Rating 等...

问题在于，如果您直接从一条路由更改为另一条，组件将简单地重新渲染。我希望它能够更好地重新安装，因为这样我就可以重新开始我选择的过滤器活动状态和产品列表等...

例如，这会发生在以下场景中：

1. 用户点击分类导航按钮Phones
2. ProductSearch 组件为 Phones 类别呈现
3. 用户过滤了一堆东西并决定进行文本搜索并从头开始
4. 用户搜索some random text
5. ProductSearch 被重新渲染（使用第二条路线）但如果我不重置所有过滤状态将保持不变。

注意下面 GIF 中的 URL 变化：

问题：

有没有办法确保我的组件在这种情况下更改为不同的路由时会重新安装？

CodeSandbox 示例：

https://codesandbox.io/s/react-routerremountonroutechangeso-881m3

---

完整代码：index.js

（如果 CodeSandbox 链接不再可用）

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Link, Switch, Route } from "react-router-dom";

import "./styles.css";

function App() {
  return (
    <Router>
      <AllRoutes />
    </Router>
  );
}

function AllRoutes(props) {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/category/:slug" component={ProductSearch} />
      <Route exact path="/search/:slug" component={ProductSearch} />
    </Switch>
  );
}

function Home(props) {
  return (
    <div>
      <div>I am Home</div>
      <div>
        <Link to="/category/phones">Phones</Link>
      </div>
    </div>
  );
}

function ProductSearch(props) {
  console.log("Rendering ProductSearch...");

  useEffect(() => {
    console.log("ProductSearch mounted...");
    return () => console.log("ProductSearch unmounted...");
  }, []);

  // useEffect(() => {
  //   console.log('Inside useEffect for slug...');
  //   console.log(props.match.params.slug);
  // },[props.match.params.slug]);

  return (
    <div>
      <div>I am ProductSearch</div>
      <div>
        <Link to="/">Home</Link>
      </div>
      <div>
        <Link to="/search/phoneModelXYZ">Search for Phone XYZ</Link>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

所以这就是我最终做的事情：

通过在 Route 中为渲染组件提供一个键，您可以使其重新挂载而不是重新渲染。

<Route exact path='/category/:slug' render={(routeProps)=>
  <ProductSearch {...routeProps} key={routeProps.match.params.slug}/>}
/>
<Route exact path='/search/:slug' render={(routeProps)=>
  <ProductSearch {...routeProps} key={'search'}/>}
/>

现在我得到以下结果：