You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
What is the new or updated feature that you are suggesting?
interfaceRouterState{location: Location;params: Params;}interfaceRoutesProps{children?: React.ReactNode;location?: Partial<Location>|string;// I'm going to add thisonChange?: (prevState: RouterState,nextState: RouterState)=>void;}<RoutesonChange={(prevState,nextState)=>{// prevState.location; same as useLocation// prevState.params; same as useParams}}><Routeelement={<XX1/>} route="/xxx1" /> <Route element={<XX2 />} route="/xxx2" /> <Route element={<XX3 />} route="/xxx3" />
</Routes>
Why should this feature be included?
What is not enough?
With the current API, you cannot detect path changing before it actually happens. You can only know it afterwards with useLocation and useEffect.
Why I need it, show some scenarios:
Usually, we need to know when the route changes as we need to fetch API results with different parameters. We'll code like this:
// <Route element={<DetailPage />} path="/item/:itemId" />// localhost:3000/#/item/10001?filters={"price":">100$"}constlocation=useLocation();constparams=useParams();useEffect(()=>{constitemId=params.itemId;constpathname=location.pathname;// get extra params from hash query, pass it as a request parameter.request('/some/api/for/itemDetial',parse(location.search).filters).then((data)=>{// filters as a parameter.setState(data);});},[location,params]);
As there's some new data flow library as recoil by Facebook which is based on observer pattern, requests are usually bound with state changes, like:
// atom.tsconstfilter=atom({key: 'filterParamKey',default: undefined});constgetDetail=selector({key: 'getDetailSelector',get: async({ get })=>{// this function will be triggered for every atom involved in with the `get` method changes.constfilterValue=get(filter);returnawaitrequest('/some/api/for/itemDetial',filterValue);}});// component.tsxconstlocation=useLocation();constparams=useParams();constsetFilterState=useSetRecoilState(filter);// components just need to focus on setting values with `recoil`.useEffect(()=>{setFilterState(parse(location.search).filters);},[location,params]);
In this case, request is triggered instantly when the filter state changes.
If you route as below:
navigate to #/item/10001?filters=xxxx
navigate to #/randompage // which clears the filter state.
click prev of the browser and find out filter parameter is lost.
How to fix it with onChange property
constlocation=useLocation();constparams=useParams();constsetFilterState=useSetRecoilState(filter);// components just need to focus on setting values with `recoil`.return<RoutesonChange={(prev,next)=>{setFilterState(parse(next.location.search).filters);}}></Routes>
The text was updated successfully, but these errors were encountered:
I think this will be covered by the Events Proposal, so I'm going to close this out and link to it from there.
If there's a separate aspect to be considered, please open a Proposal over in the Discussions tab so it can go through our new Open Development process. Thanks!
What is the new or updated feature that you are suggesting?
Why should this feature be included?
What is not enough?
With the current API, you cannot detect path changing before it actually happens. You can only know it afterwards with
useLocation
anduseEffect
.Why I need it, show some scenarios:
Usually, we need to know when the route changes as we need to fetch API results with different parameters. We'll code like this:
As there's some new data flow library as
recoil
by Facebook which is based on observer pattern, requests are usually bound with state changes, like:In this case, request is triggered instantly when the filter state changes.
If you route as below:
#/item/10001?filters=xxxx
#/randompage
// which clears the filter state.prev
of the browser and find out filter parameter is lost.How to fix it with
onChange
propertyThe text was updated successfully, but these errors were encountered: