Clicking on the link adds a search parameter. And it crashes when the page is refreshed.

[hasanaktas]

Summary

Screen.Recording.2023-04-11.at.22.05.35.mov

If I change the name of the rest in the code sample, this time it adds a parameter with that name.

And when I refresh the page it doesn't work. When I delete the search parameter, which I don't know why it added, the page continues to work.

All I do is redirect to p/1 or p/2 as href.

Forwarding states

app

• (tabs)
• P
  • [...rest].tsx

---

/P/1 => /P/1?rest=1

/P/2 => /P/2?rest=2

/P/test-product-name/1 => /P/test-product-name/1?rest=test-product-name&rest=1

The situation I want

P/1 => P/1

P/2 => P/2

/P/test-product-name/1 => /P/test-product-name/1

Minimal reproducible example

App Folder

Root Layout

ProductCard Component

[hasanaktas]

I created the file named _layout.jsx in the folder named P and put the following code.

import { Slot } from 'expo-router'

export default function HomeLayout() {
     return <Slot />
}

In addition, I made my Root layout file like this.

const RootLayout = () => {
    return (
        <Stack>
            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
            <Stack.Screen name="P" options={{ headerShown: false }} />
        </Stack>
    )
}

It then started working fine, but why is this necessary? I could not find the correct information in the documentation. Did I make a mistake or is this a bug?

[nikshirobokov]

Hey everyone! I have the same issue :(

-.and.10.more.pages.-.Personal.-.Microsoft.Edge.2023-05-01.01-28-58_Trim.mp4

But at the same time I have an addition. That the error occurs only when we pass one parameter.

Bad:

router.push({
  pathname: '/cuisine/[path]/[foodPointId]/[...foodPoint]',
  params: {
	  path: 'cafe',
	  foodPointId: 470,
	  foodPoint: [107], // Single param for [...foodPoint]
  },
});

Good:

router.push({
  pathname: '/cuisine/[path]/[foodPointId]/[...foodPoint]',
  params: {
	  path: 'cafe',
	  foodPointId: 470,
	  foodPoint: [107, 'priceAsc'], // 2> params for [...foodPoint]
  },
});

[nikshirobokov]

I have found a solution to this problem. I added _layout.tsx

// /app/cuisine/[path]/[foodPointId]/_layout.tsx
import { Slot } from 'expo-router';

export default function FoodPointLayout () {
  return <Slot />;
}

Now the ? search parameters is not added. The path looks good and without refresh error:

[stinodes-optios]

import { Slot } from 'expo-router';

export default function FoodPointLayout () {
  return <Slot />;
}

Although it does not throw the error on refresh, I still get the same issue when navigating to a different route and pressing the back button in the browser.
This, to me, seems related to these "rest"-parameters being parsed as a single value when there's only one, but as an array when there are multiple. expo-router seems to expect them to be an array at all times, though.

Aside from this, the extra _layout file seems wholly necessary.

Seems like a bug to me, still, or some mechanic/nuance that's not entirely clear from the documentation.

[EvanBacon]

OP is having an issue due to misuse of the rest parameter. When you use [...rest], you cannot use a param named rest. rest represents the slug segments in the route, however, using rest manually forces the value to not be an array. I can add a better error message for this. In OPs case, rest would normally be ['1'] or ['2'] which would match P/[...rest].