grab dynamic path segment from props

[juliusmarminge]

Summary

The current way of grabbing dynamic path segment doesn't provide a very nice DX since we need to do erronous error checking that isn't needed:

// app/post/[id].tsx
const Post: React.FC = () => {
  const { id } = useSearchParams();
  if (!id) throw new Error("unreachable"); // <-- errounous error checking
  const { data } = api.post.byId.useQuery(id);

I've noticed this when trying out the new app-dir in Next.js 13 too:

// app/post/[name]/page.tsx
function Page({ params }: { params: { name: string } }) {
  const { data } = getByName(params.name);
}

compared to the old way using the router hook in the pages directory:

// pages/post/[name].tsx
function Page() {
  const { query } = useRouter();
  if (!query.name) throw new Error(); // <-- notice we have to check this even though it 100% exists
  const { data } = getByName(query.name);
}

Would it be possible for expo router to pass the segment through props, the only thing we get back now is just a static /post/[id] without the actual id:

const Post: React.FC = (props) => {
  console.log(props);
  //          ^? { segment: "post/[id]" }

Not sure what this would even be useful for?

Minimal reproducible example

https://github.com/t3-oss/create-t3-turbo/blob/main/apps/expo/app/post/%5Bid%5D.tsx

[EvanBacon]

We already pass segment which is the normalized file name without the extension. We may implement the optional syntax [[]] from SvelteKit in the future which would result in an unmatched screen if the ID is missing, this isn't super critical at the moment though since it can be done pretty easily in userspace.

[brilliantinsane]

export default function DynamicLayout({ segment }) {
  if (segment === '(search)') {
    return <SearchStack />;
  }

  return <Stack />;
}

Could you please provide a typescript example for such case?

[marklawlor]

const segments = useSegments()
if (segments.includes(`(search)`)) {
  return <SearchStack />;
}

https://docs.expo.dev/router/reference/hooks/#usesegments