In the last two weeks, I contacted DVA and quickly realized a management platform using DVA + ANTD + Webpack. I have to say, the DVA package for the React and Redux series is really nice and easy to use. Combined with ANTD, the organization interface is very fast, and antD components need basically all the controls without their own efforts to build wheels. However, there is a tricky problem, which is the case of different labels in the same menu. Because the URL pathman of the same menu is the same, the difference is that the URL search is different, but the react-Reouter is the corresponding router component that recognizes the URL pathman.
Global key
If you want the router to correspond to search, you can remount the component based on a different search, but this is a global key and is too intrusive. But we can remount the component with a different URL search that we want. According to the design of the system, there are two tabs under the left menu bar. TAB 2 is our save TAB page. If you click the TAB page, it can be remounted. That’s not what we want. And the setting of this key itself is based on the global, especially strong invasion, performance is also the next choice.
Add the key components
A component can be remounted based on the consistency of its key during diff. A key is unique at its peer level, not globally unique (the diff algorithm is a peer comparison strategy).
Combine redux’s component key Settings
Combined with redux components, redux management data is mounted to the React Component via Connnct.