Wasp-lang•2mo ago

React Router missign hooks

I am trying to use my url has a state manager for some custom search in my app but for some reason some hooks are "missing" from the react-router-dom.... or I am probably doing something wrong. I want to get the search Params from it so I can sync the page content with it....

5 Replies

kapa.ai•2mo ago

Hi @Stefan Vitória. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Wasp, you can use the Link component and the routes object to manage your URL and its parameters. The Link component accepts a search prop that can take any valid input for URLSearchParams constructor. For example, the object { sortBy: 'date' } becomes ?sortBy=date in the URL. You can find more details about the Link component in the Wasp documentation (https://wasp-lang.dev/docs/advanced/links#link-component). The routes object contains a function for each route in your app. You can use it to build your URLs with the required parameters. For example, if you have a route like /task/:id, you can build a link to it with routes.DetailRoute.build({ params: { id: 1 } }). You can find more details about the routes object in the Wasp documentation (https://wasp-lang.dev/docs/advanced/links#routes-object). If you want to get the search parameters from the URL, you can use the useLocation hook from react-router-dom. This hook returns the current location object which contains the search property. You can then use the URLSearchParams API to parse this property and get the search parameters. Here is an example of how you can do it:

import { useLocation } from 'react-router-dom'

function MyComponent() {
  const location = useLocation()
  const searchParams = new URLSearchParams(location.search)

  // Now you can get the search parameters with searchParams.get('paramName')
}

import { useLocation } from 'react-router-dom'

function MyComponent() {
  const location = useLocation()
  const searchParams = new URLSearchParams(location.search)

  // Now you can get the search parameters with searchParams.get('paramName')
}

Please note that this is standard React and react-router-dom usage and it should work in Wasp as well. However, if you are having issues with missing hooks in react-router-dom, it might be due to the version of react-router-dom used in your Wasp project. Wasp has recently upgraded to React 17, and there might be some compatibility issues with certain versions of react-router-dom. You can check the version of react-router-dom in your project and see if upgrading or downgrading it solves your issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Stefan Vitória, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

martinsos•2mo ago

Keep in note Wasp is ona bit older version of react-router-dom (5.3.3), so that is probably it. We will be updating it soon!

Stefan Vitória•2mo ago

Oh yeah. No problem. Guess I will have to build my own then :boifather2: Thanks for the answer It's very straightforward. My laziness fault

martinsos•2mo ago

Hah no worries, it is smart to use existing stuff when you can instead of writing your own!

Stefan Vitória•2mo ago

Ooh yeah.... thank you one more time

Gaming

Programming

React Router missign hooks