![](/img/trans.png)
[英]how to render different components using react-router-dom v6.0.0 with react-redux
[英]How to force a re-render of React-Redux components upon React-Router-Dom NavLink click?
我有一個使用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?
您可以保持一個值處於狀態,例如,稱為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>
我看到您在標記中列出了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;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.