diff --git a/docs/01-app/05-api-reference/03-file-conventions/intercepting-routes.mdx b/docs/01-app/05-api-reference/03-file-conventions/intercepting-routes.mdx index 46d6d4ce0971..e6c3f9479e9f 100644 --- a/docs/01-app/05-api-reference/03-file-conventions/intercepting-routes.mdx +++ b/docs/01-app/05-api-reference/03-file-conventions/intercepting-routes.mdx @@ -32,7 +32,7 @@ However, when navigating to the photo by clicking a shareable URL or by refreshi ## Convention -Intercepting routes can be defined with the `(..)` convention, which is similar to relative path convention `../` but for segments. +Intercepting routes can be defined with the `(..)` convention, which is similar to relative path convention `../` but for route segments. You can use: @@ -51,7 +51,7 @@ For example, you can intercept the `photo` segment from within the `feed` segmen height="604" /> -> Note that the `(..)` convention is based on _route segments_, not the file-system. +> **Good to know:** The `(..)` convention is based on _route segments_, not the file-system. For example, it does not consider `@slot` folders in [Parallel Routes](/docs/app/api-reference/file-conventions/parallel-routes). ## Examples diff --git a/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx b/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx index b22101524474..7ccbc41c4a75 100644 --- a/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx +++ b/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx @@ -276,7 +276,7 @@ export default function Default() { } ``` -Inside your `@auth` slot, intercept the `/login` route by updating the `/(.)login` folder. Import the `` component and its children into the `/(.)login/page.tsx` file: +Inside your `@auth` slot, intercept the `/login` route by importing the `` component and its children into the `@auth/(.)login/page.tsx` file, and updating the folder name to `/@auth/(.)login/page.tsx`. ```tsx filename="app/@auth/(.)login/page.tsx" switcher import { Modal } from '@/app/ui/modal' @@ -306,7 +306,7 @@ export default function Page() { > **Good to know:** > -> - The convention used to intercept the route, e.g. `(.)`, depends on your file-system structure. See [Intercepting Routes convention](/docs/app/api-reference/file-conventions/intercepting-routes#convention). +> - The convention `(.)` is used for intercepting routes. See [Intercepting Routes](/docs/app/api-reference/file-conventions/intercepting-routes#convention) docs for more information. > - By separating the `` functionality from the modal content (``), you can ensure any content inside the modal, e.g. [forms](/docs/app/guides/forms), are Server Components. See [Interleaving Client and Server Components](/docs/app/getting-started/server-and-client-components#examples#supported-pattern-passing-server-components-to-client-components-as-props) for more information. #### Opening the modal @@ -461,7 +461,7 @@ export default function CatchAll() { > **Good to know:** > -> - We use a catch-all route in our `@auth` slot to close the modal because of how parallel routes behave(#behavior). Since client-side navigations to a route that no longer match the slot will remain visible, we need to match the slot to a route that returns `null` to close the modal. +> - We use a catch-all route in our `@auth` slot to close the modal because of how parallel routes behave. Since client-side navigations to a route that no longer match the slot will remain visible, we need to match the slot to a route that returns `null` to close the modal. > - Other examples could include opening a photo modal in a gallery while also having a dedicated `/photo/[id]` page, or opening a shopping cart in a side modal. > - [View an example](https://github.com/vercel-labs/nextgram) of modals with Intercepted and Parallel Routes.