If all the single-page application, there will be a problem that I as the primary interface A, B jumps to a secondary interface when the interface back to A, you'll find all the parameters are reloaded
Many times if we have a lot of news in the interface list, selected the part of the news list by setting parameters, this time I click on the news heading into the details of the news, then returns
The A interface, we found that all the conditions are reset, so that the user experience is clearly very bad.
So I was a rookie for the kind of big brothers who say the method can be achieved using redux not quite understand, so I will introduce another method
In the jump to the B interface when the parameter data you want to keep ah, ah, transferred to the B interface, use localStorage to save the B interface inside, then returned when the A interface can be judged under localStorage it is not present, there is a direct use of the data for the parameters, otherwise according to the original come.
A interface
componentDidMount () { backTop (); the let localTemp = the JSON.parse (localStorage.getItem ( 'hotTemp' )); IF (localTemp undefined || localTemp === === null ) {// here it is not judged from B back, if not, the initialization request the let the params = { Page: . 1 , size: 20 is } the this .getHotEvent (the params); } the else {// If back from B, then put conditions ah, ah data, directly to the display state on it the this .setState ({ pageNum: localTemp.pageNum, hotEvent: localTemp.hotEvent, Success: localTemp.success, Total: localTemp.total }) IF (localTemp.sflag) {// here I was made a judge is not to fill the filter condition if the filter criteria back to fill in the A interface, these filter criteria to show up this .setState ({ defaultInput: localTemp.defaultInput, the startTime: localTemp.startTime, endTime: localTemp.endTime, }) // this.getIeahotsSearch (localTemp.searchParam); } the else {// here are no filters, as long as the data it displays // this.getHotEvent (localTemp.params); } } } {{<Link className = "left transition3 Recall" to = pathname: "/ B" , state: {eventArray: Item, localState: the this .STATE}, // here is the data I want to keep, pass through state B }} > {item.title} </ Link>
B interface
componentDidMount() { /*保存A界面列表的参数*/ if(this.props.location.state.localState!==undefined&&this.props.location.state.localState!==null){ localStorage.setItem("hotTemp", JSON.stringify(this.props.location.state.localState)); //console.log(localStorage.getItem('hotTemp')); } }
that's it
Note: Be sure to clear this localStorage In other interface