How to get current path info?

[elliotwaite]

I have a left navigation menu of links and I want to highlight the link that corresponds with the current path. Is there a way to access the current path info? Or is there a better way to accomplish what I'm trying to do?

I saw this was already discussed a bit here: #10, where the idea of a useAsPath() hook was mentioned, but I wasn't sure how it could be implemented (perhaps someone could point me in the right direction). @nandorojo also mentioned that this may be an underlying issue with React Native, and perhaps this issue should be opened with them. Is that still the case?

[nandorojo]

yeah that's still the case. since I consider this a dangerous implementation I haven't wanted to add it to solito.

if you want, you can see this PR / discussion for how you could do it yourself though: #45

I would decouple it from useRouter into its own hook.

I do think it's an issue to open with React Navigation though. I'd like an official API from them.

[nandorojo]

I have a left navigation menu of links and I want to highlight the link that corresponds with the current path.

Is this component only living on Web?

[elliotwaite]

Okay, got it. Thanks for the info. Looking at #45 was helpful. I'll see what I can figure out.

Is this component only living on Web?

I'm trying to get it to work for both web and native.

[vbylen]

As a temporary hack I did this using the expo-linking package:

import * as Linking from 'expo-linking'

const { useURL, createURL } = Linking

Then inside your screen or component:

  const url = useURL()
  const base = createURL('')
  const pathName = url?.split(base)[1]

You can use it like so :

return <View sx={{ bg: pathName?.startsWith('/home') ? 'green' : 'red' }} />

Sadly the useUrl hook doesn't seem to re-render when switching between dynamic routes, but for other use cases it works fine.

[elliotwaite]

@vbylen, nice. Thanks for sharing.