Hide params from URL #49

Activity

1. 509dave16 commented on Mar 12, 2020

   

   509dave16

   on Mar 12, 2020

   Last edited by 509dave16

   More actions

   @steventilator A better way to handle this is to have the constructor or componentDidMount assign the function to a file level scoped variable that then would get used in your navigationOptions callback. Would have to have a dummy function assigned or check for undefined/null in case navigationOptions gets called before componentDidMount/constructor.
2. divonelnc commented on Oct 27, 2020

   

   divonelnc

   on Oct 27, 2020

   More actions

   I am also porting my RN project to web and would like to hide the params from the URL.
   I am sending an object as a route param to a new page and my URL is polluted with something like
   http://localhost:19006/undefined?group=%5Bobject%20Object%5D

   Besides this example, I would like to generally not show the params in the URL. Is there any way to hide them?

   👍React with 👍1Reacted by Mahmonir Bakhtiyari
3. MahmonirB commented on Dec 20, 2020

   

   MahmonirB

   on Dec 20, 2020

   More actions

   I have same problem with hiding params in URL but I don't send it as params, when component request an API call with some filters, this filter is added to url. How can I prevent it?
   thanks
4. alessiocancian commented on Apr 13, 2021

   

   alessiocancian

   on Apr 13, 2021

   More actions

   I removed them adding the following custom getPathFromState to linkingOptions.
   This code removes all object and function parameters from the url.

   const linking = {
     config: {
       screens: {
         ...
       }
     },
     getPathFromState: (state, options) => {
       const cleanState = {
         ...state,
         routes: state.routes.map(route => {
           if(!route.params) {
             return route
           }
   
           const cleanParams = {}
           for(const param in route.params) {
             const value = route.params[param]
             if(typeof value !== "object" && typeof value !== "function") {
               cleanParams[param] = value
             }
           }
           return {
             ...route,
             params: cleanParams,
           }
         }),
       }
       return getPathFromState(cleanState, options) //imported from @react-navigation/native
     },
   }