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