如何在React-Router-Dom NavLink单击时强制重新渲染React-Redux组件？

Question

我有一个使用React-Router-Dom进行导航的React应用程序。 这些页面非常注重使用可以以CRUD形式打开的数据表。 由于表中有大量记录，因此用户对表进行排序，过滤和分页以查找所需记录的情况并不少见。

作为一个相当标准的Web应用程序，我们在页面的左侧有一个导航栏。 这是由NavLinks构建的 。

该应用程序的主体是MainPanel组件，它几乎完全是Switch的一系列Route组件：

  <Switch>
    <Route path="/page1" component={ComponentOne} />
    <Route path="/page2" component={ComponentTwo} />
  </Switch>

我现在从上面有一个要求，当用户选择其中一个NavLink时，它应该充当页面主体中所有内容的“重置”。 特别是，这应该作为表的所有设置（排序，过滤器，页面等）的“重置”。

这似乎几乎应该是微不足道的，因为我要做的就是触发保存该表的页面的主面板的重新渲染。 但是，我在React-Router-Dom的文档中找不到任何包含此内容的密钥。

有人知道我想念什么吗？ 没有简单/正确的方法说：“单击此链接时，请始终重新渲染MainPanel？

Answer 1

您可以保持一个值处于状态，例如，称为panelKey ，用作主面板的key道具。 然后，当单击链接时，您可以给panelKey一个新的值，React将丢弃主面板并创建一个全新的组件。

例

 class Timer extends React.Component { timer = null; state = { count: 0 }; componentDidMount() { this.timer = setInterval(() => { this.setState(prevState => ({ count: prevState.count + 1 })); }, 1000); } componentWillUnmount() { clearInterval(this.timer); } render() { return <div>{this.state.count}</div>; } } class MainPanel extends React.Component { state = { panelKey: 1 }; onClick = () => { this.setState(prevState => ({ panelKey: prevState.panelKey + 1 })); }; render() { return ( <div key={this.state.panelKey}> <button onClick={this.onClick}> Reset Panel </button> <Timer /> </div> ); } } ReactDOM.render(<MainPanel />, document.getElementById("root")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div> 

Answer 2

我看到您在标记中列出了react-redux，为什么不调度自定义操作来通知其他组件应该重置过滤器？

import { LOCATION_CHANGE } from 'react-router-redux';
import { resetFilter } from './filterActions.js';

const resetFilterMiddleware = ({ dispatch }) => next => action => {
    // Listen for a location chnage
    if(action.type === LOCATION_CHANGE){
        dispatch(resetFilter()); // { type: 'RESET_FILTER' } or something along the lines
    }

    next(action);
}

export default resetFilterMiddleware;