Unmatched Route when using shared routes with array syntax

[francisleigh]

Please provide the following:

1. SDK Version: 49
2. Platforms(Android/iOS/web/all): Web (haven’t tried ios or android yet)

Github issue link: `Unmatched Route` when using shared routes with array syntax · Issue #805 · expo/router · GitHub

Which package manager are you using? (Yarn is recommended)

yarn

Summary

Hello,

I have set up a basic expo typescript project using npx expo init with expo-router & expo-dev-client installed and I’m running this app on the Web.

Whenever i try to navigate to a shared route that has been created in the app/ directory using the array syntax I consistently get:

Unmatched Route
-------
Page could not be found. Go back.
[http://localhost:8081/events/(manage)/1234]

(http://localhost:8081/events/1234)

In my app directory I have created a file layout like so:

app/
  index.tsx
  _layout.tsx

  events/
    (manage, preview)/
      [eventID].tsx
       _layout.tsx

When I set my hrefs to be /events/1234 they work but then how do I differentiate between the sub-view to which I want to gain access e.g: (manage, preview).

When I get to the page successfully (without (manage) or (preview) in the href) my segment log (in (manage, preview)/_layout.tsx) looks like events/(manage,preview)

I’m hoping I’ve just massively misinterpreted something here which is usually the case.

Any help would be amazing!

Peace!

Minimal reproducible example

app/index.tsx

import { Link, useRouter } from "expo-router";

export default function Page() {
  const router = useRouter()
  return <>
    <Link href="/events/(manage)/1234">
      I don't work
    </Link>
    <Button title="I don't work" onPress={() => router.push("/events/(manage)/1234")} />

    <Link href="/events/1234">
      I work but am confused...
    </Link>
    <Button title="I work but am confused..." onPress={() => router.push("/events/1234")} />
  </>
}

events/(manage,preview)/_layout.tsx

import { Slot } from "expo-router";

export default function DynamicLayout({ segment }) {
  console.log(segment);

  return <Slot />;
}

events/(manage,preview)/[eventID].tsx

import { useLocalSearchParams, usePathname } from "expo-router";

const Page = () => {
  const pathname = usePathname();
  const localSearchParams = useLocalSearchParams();

  return (
    <Text>
      {pathname} : {localSearchParams.eventID}
    </Text>
  );
};

Thank you!

[francisleigh]

Am i missing this step?

export const unstable_settings = {
  // Used for `(foo)`
  initialRouteName: 'first',
  // Used for `(bar)`
  bar: {
    initialRouteName: 'second',
  },
};

[francisleigh]

The issue has been picked up on github. follow it there.|

`Unmatched Route` when using shared routes with array syntax