多次单击同一个反应路由器 Link 时强制重新安装组件

Question

我有一个路由页面，其中包含组件安装时获取数据的数据表。当我多次点击同一个 react-router-dom Link （到上面的路线）时，似乎只有在路线改变时组件才会卸载（要渲染不同的组件）。

我希望在再次单击同一个 link 时强制重新安装该组件以获取新数据。 react-router-dom Link 或任何其他 Link 组件中是否有任何选项或任何技巧可以做到这一点？

我的示例代码在这里：https://codesandbox.io/s/react-router-9wrkz

我希望在多次点击关于 link 时重新挂载关于组件

Answer 1

为什么不通过在您的组件中创建一个函数来强制重新加载 onClick：

remount(){
    location.reload(true);
}

然后将 onClick 处理程序分配给 Link:

<Link to="/your route" onClick = {this.remount}>

除非您反对重新加载页面，否则似乎工作正常。

Answer 2

强制组件重新挂载的一种方法是更改 key 属性（您可以使用 Date.now() 或 props.location.key）：

  <Route
    path="/about"
    render={props => <About key={props.location.key} {...props} />}
  />

Answer 3

您可以使用此方法进行渲染

componentWillReceiveProps(recievedProps) {
    console.log("componentWillReceiveProps called");
    if (
      recievedProps &&
      this.props &&
      recievedProps.location &&
      this.props.location &&
      recievedProps.location.key &&
      this.props.location.key &&
      recievedProps.location.key !== this.props.location.key
    ) {
      this.setState({ loading: true });
      promise().then(result => {
        this.setState({ value: result, loading: false });
      });
    }
  }

Answer 4

供日后参考。除了上面提到的答案之外，我还需要调整一些东西，因为 none 对我来说效果很好。之前提到过 props 的比较，但是因为键在一个对象（引用）中，所以它从未看到更新（你正在比较同一个对象）。所以我通过将其保存为道具来跟踪。

我更喜欢使用 componentDidUpdate，因为当您可能只需要更新某些元素时，您不会卸载和安装整个组件，

对于此示例，您的组件确实需要使用 withRouter() 进行链接，因此您可以访问路由属性。

    // You cant use prevProps because object will be the same, so save it in component
    private currentRouteLocationKey: string| undefined; 

    public componentDidUpdate(): void {
    const currentRouteKey = this.props.history.location.key;

        // Compare keys so you only update when needed
        if (this.currentRouteLocationKey !== currentRouteKey) {
            // Add logic you want reset/ updated
            this.refreshPage();

            // Save the new key
            this.currentRouteLocationKey = currentRouteKey;
        }
    }

Answer 5

It means sometimes I want to force remount, sometimes not. How can I achieve this

这种方法怎么样？它仅在 PUSH 上重新挂载。不会在 REPLACE 上重新挂载。

https://codesandbox.io/s/react-router-forked-z8uco?file=/index.js

export function withRemountOnHistoryPush(Component) {
  const DecoratedComponent = (props) => {
    const [key, setKey] = React.useState(0);
    const history = useHistory();
    React.useEffect(() => {
      return history.listen((_, action) => {
        if (action !== "PUSH") return;
        setKey((prev) => prev + 1);
      });
    }, [history]);
    return <Component key={key} {...props} />;
  };
  return DecoratedComponent;
}

多次单击同一个反应路由器 Link 时强制重新安装组件

Force remount component when click on the same react router Link multiple times

reactjs

react-router

react-router-v4

react-router-dom