Hide params from URL

[steventilator]

Is there a way to prevent query parameters being written into the URL?

I am porting my React Native project to the web and I have a few screens that add a function as a parameter in componentDidMount. This allows a button in the header to trigger this function. When using createBrowserApp this function is written as a query parameter into the URL. Is there a way around this?

[509dave16]

@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.

[divonelnc]

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?

[MahmonirB]

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

[alessiocancian]

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
  },
}