From 4a70c6ba51c119db9cf872e15082a0d9e578c9fc Mon Sep 17 00:00:00 2001 From: Isaac McFadyen <6243993+isaac-mcfadyen@users.noreply.github.com> Date: Mon, 18 Jul 2022 16:51:00 -0400 Subject: [PATCH 1/7] Update overview.mdx --- .../docs/src/pages/qwikcity/routing/overview.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/docs/src/pages/qwikcity/routing/overview.mdx b/packages/docs/src/pages/qwikcity/routing/overview.mdx index 94aefefced0..a8faa1d9af3 100644 --- a/packages/docs/src/pages/qwikcity/routing/overview.mdx +++ b/packages/docs/src/pages/qwikcity/routing/overview.mdx @@ -8,18 +8,18 @@ Routing is a way to map public URLs for a site to specific components declared i ## Basic routing -In its simplest form, the URL the user sees `http://server/some/path`, will be mapped to the `some/path` component in the `src/routes` folder. +In the Qwik City router, folders map to paths. For example, if the user sees `https://example.com/some/path`, the component exported at `src/routes/some/path` (either `.mdx` or `.tsx`) will be shown. ``` - src/ - routes/ - some/ - - path.tsx # http://server/some/path + - path.tsx # https://example.com/some/path ``` ## Implementing a Component -To return HTML for a specific route you will need to implement a component. For `.tsx` file the component must be exported as `default`. (Alternatively, you can use `.mdx` extension discussed [later](/qwikcity/content/mdx).) +To return HTML for a specific route you will need to implement a component. For `.tsx` files the component must be exported as `default`. Alternatively, you can use `.mdx` extension discussed [later](/qwikcity/content/mdx). ```typescript @@ -34,11 +34,11 @@ export default component$(() => { ### `_` prefix -From time to time, there is a need to place files into the `src/routes` folder without them showing up on any route. In such a case use the `_` prefix to let Qwik City knows that the file is private and should not be exposed on any route. +Occasionally, there is a need to place files into the `src/routes` folder without them showing up on any route. In this case, use the `_` prefix to let Qwik City know that the file is private and should not be exposed. ## `@qwik-city-plan` -The route information is stored in files. This is great for developer ergonomics but not useful for creating bundles and chunks. In addition, in some environments, such as edge functions, there is no file system that can be accessed. For this reason, it is necessary to serialize the route information into a single file. This is done through the `@qwik-city-plan` import. +Qwik City stores route information in files on disk. This is great for developer ergonomics but not useful for creating bundles and chunks. Additionally, in some environments - such as edge functions - there is no file system that can be accessed. For this reason, it is necessary to serialize the route information into a single file. This is done through the `@qwik-city-plan` import. ```typescript import cityPlan from '@qwik-city-plan'; @@ -55,4 +55,4 @@ Qwik City also supports: - [Nested layouts](/qwikcity/layout/overview) - [Menus](/qwikcity/content/menu) -These are discussed later. \ No newline at end of file +These are discussed later. From 743d0d7d668a71ab6a676edd269535214a77629b Mon Sep 17 00:00:00 2001 From: Isaac McFadyen <6243993+isaac-mcfadyen@users.noreply.github.com> Date: Mon, 18 Jul 2022 16:53:28 -0400 Subject: [PATCH 2/7] Update default-index.mdx --- .../docs/src/pages/qwikcity/routing/default-index.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/docs/src/pages/qwikcity/routing/default-index.mdx b/packages/docs/src/pages/qwikcity/routing/default-index.mdx index 3bd05fb3b6a..092aa903d62 100644 --- a/packages/docs/src/pages/qwikcity/routing/default-index.mdx +++ b/packages/docs/src/pages/qwikcity/routing/default-index.mdx @@ -10,14 +10,14 @@ Sometimes the route component gets too complex, and placing the whole implementa ``` - src/ - routes/ - - index.tsx # http://server/ + - index.tsx # https://example.com/ - some/ - - index.tsx # http://server/some + - index.tsx # https://server/some - path/ - - index.tsx # http://server/some/path - - _other_component.tsx # this file is ignored and not mapped to any URL. + - index.tsx # https://example.com/some/path + - _other_component.tsx # this file is ignored and not mapped to any URL because of the leading underscore. ``` ### `_` prefix -From time to time, there is a need to place files into the `src/routes` folder without them showing up on any route. In such a case use the `_` prefix to let Qwik City knows that the file is private and should not be exposed on any route. +Occasionally, there is a need to place files into the `src/routes` folder without them showing up on any route. In this case, use the `_` prefix to let Qwik City know that the file is private and should not be exposed. From 6f2d057c57cd4e29626dcb6fddfb00c72a6d116c Mon Sep 17 00:00:00 2001 From: Isaac McFadyen <6243993+isaac-mcfadyen@users.noreply.github.com> Date: Mon, 18 Jul 2022 16:56:57 -0400 Subject: [PATCH 3/7] Update slugs.mdx --- .../docs/src/pages/qwikcity/routing/slugs.mdx | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/docs/src/pages/qwikcity/routing/slugs.mdx b/packages/docs/src/pages/qwikcity/routing/slugs.mdx index 85c5c742a61..eeb1175705e 100644 --- a/packages/docs/src/pages/qwikcity/routing/slugs.mdx +++ b/packages/docs/src/pages/qwikcity/routing/slugs.mdx @@ -2,29 +2,29 @@ title: Qwik City - Routing --- -# Qwik City - Slugs +# Qwik City - Path Parameters -Slugs are parts of the URLs that are extracted into parameters. +Path Parameters are parts of the URLs that are extracted into parameters. -Imagine that you have a page with the following URLs where `[skuId]` can be any of the thousands of products that you have in your database. It would be impractical to create a route for each product. Instead, we need to define a slug (a part of the URL) that will be used to extract the `[skuId]`. +Imagine that you have a page with the following URLs where `[skuId]` can be any of the thousands of products that you have in your database. It would be impractical to create a route for each product. Instead, we need to define a Path Parameter (a part of the URL) that will be used to extract the `[skuId]`. -- `http://server/sku/[skuId]` - - Example: `http://server/sku/1234` - - Example: `http://server/sku/xyz-567` -- `http://server/sku/[skuId]/details` - - Example: `http://server/sku/1234/details` +- `https://example.com/sku/[skuId]` + - Will match: `https://example.com/sku/1234` + - Will match: `https://example.com/sku/xyz-567` +- `http://example.com/sku/[skuId]/details` + - Will match: `https://example.com/sku/1234/details` ``` - src/ - routes/ - sku/ - [skuId]/ - - index.js # http://server/sku/1234 - - details.js # http://server/sku/1234/details + - index.js # https://example.com/sku/1234 + - details.js # https://example.com/sku/1234/details ``` -## Retrieving the slug from the URL +## Retrieving the Path Parameter from the URL Once we have `[skuId]` in the URL, we need a way to retrieve it. This can be done by using `useLocation()` API. @@ -37,9 +37,9 @@ export default component$(() => { return (

SKU

-

pathname: {location.pathname}

-

skuId: {location.params.skuId}

+

Pathname: {location.pathname}

+

Sku Id: {location.params.skuId}

 ); }); -``` \ No newline at end of file +``` From 8e19e3823de094e634ac63679e6659f01be6ced5 Mon Sep 17 00:00:00 2001 From: Isaac McFadyen <6243993+isaac-mcfadyen@users.noreply.github.com> Date: Mon, 18 Jul 2022 17:02:17 -0400 Subject: [PATCH 4/7] Rename slugs.mdx to path-parameters.mdx --- .../src/pages/qwikcity/routing/{slugs.mdx => path-parameters.mdx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/docs/src/pages/qwikcity/routing/{slugs.mdx => path-parameters.mdx} (100%) diff --git a/packages/docs/src/pages/qwikcity/routing/slugs.mdx b/packages/docs/src/pages/qwikcity/routing/path-parameters.mdx similarity index 100% rename from packages/docs/src/pages/qwikcity/routing/slugs.mdx rename to packages/docs/src/pages/qwikcity/routing/path-parameters.mdx From 0b53a2e921d39b499b69496c2f423b6f1a8c53a0 Mon Sep 17 00:00:00 2001 From: Isaac McFadyen <6243993+isaac-mcfadyen@users.noreply.github.com> Date: Mon, 18 Jul 2022 17:03:38 -0400 Subject: [PATCH 5/7] Update pathless.mdx --- packages/docs/src/pages/qwikcity/routing/pathless.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/docs/src/pages/qwikcity/routing/pathless.mdx b/packages/docs/src/pages/qwikcity/routing/pathless.mdx index 076f81f82d1..94946f02ab1 100644 --- a/packages/docs/src/pages/qwikcity/routing/pathless.mdx +++ b/packages/docs/src/pages/qwikcity/routing/pathless.mdx @@ -11,7 +11,7 @@ At times components get so complex that using `index.ts` is not enough, and they - routes/ - some/ - path/ - - _complex-component/ # Notice the `_` prefix - - index.tsx # http://server/some/path (`_complex-component` is not used.) - - _other_component.tsx # this file is ignored and not mapped to any URL. + - _complex-component/ # Notice the underscore prefix + - index.tsx # https://example.com/some/path (the _complex-component folder is ignored) + - _other_component.tsx # this file is ignored and not mapped to any URL because of the leading underscore. ``` From fb4be8fb4f01c38c947c5b53ac660b44a1bcf32d Mon Sep 17 00:00:00 2001 From: Isaac McFadyen <6243993+isaac-mcfadyen@users.noreply.github.com> Date: Mon, 18 Jul 2022 17:04:28 -0400 Subject: [PATCH 6/7] Update path-parameters.mdx --- packages/docs/src/pages/qwikcity/routing/path-parameters.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/src/pages/qwikcity/routing/path-parameters.mdx b/packages/docs/src/pages/qwikcity/routing/path-parameters.mdx index eeb1175705e..413f2b4d6c2 100644 --- a/packages/docs/src/pages/qwikcity/routing/path-parameters.mdx +++ b/packages/docs/src/pages/qwikcity/routing/path-parameters.mdx @@ -1,5 +1,5 @@ --- -title: Qwik City - Routing +title: Qwik City - Path Parameters --- # Qwik City - Path Parameters From f6f1e431e050d3156ef0574b046930594f644975 Mon Sep 17 00:00:00 2001 From: Isaac McFadyen <6243993+isaac-mcfadyen@users.noreply.github.com> Date: Mon, 18 Jul 2022 17:26:49 -0400 Subject: [PATCH 7/7] Update and rename path-parameters.mdx to route-parameters.mdx --- .../{path-parameters.mdx => route-parameters.mdx} | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) rename packages/docs/src/pages/qwikcity/routing/{path-parameters.mdx => route-parameters.mdx} (76%) diff --git a/packages/docs/src/pages/qwikcity/routing/path-parameters.mdx b/packages/docs/src/pages/qwikcity/routing/route-parameters.mdx similarity index 76% rename from packages/docs/src/pages/qwikcity/routing/path-parameters.mdx rename to packages/docs/src/pages/qwikcity/routing/route-parameters.mdx index 413f2b4d6c2..1e1fcf0b753 100644 --- a/packages/docs/src/pages/qwikcity/routing/path-parameters.mdx +++ b/packages/docs/src/pages/qwikcity/routing/route-parameters.mdx @@ -1,12 +1,12 @@ --- -title: Qwik City - Path Parameters +title: Qwik City - Route Parameters --- -# Qwik City - Path Parameters +# Qwik City - Route Parameters -Path Parameters are parts of the URLs that are extracted into parameters. +Route Parameters are parts of the URLs that are extracted into parameters. -Imagine that you have a page with the following URLs where `[skuId]` can be any of the thousands of products that you have in your database. It would be impractical to create a route for each product. Instead, we need to define a Path Parameter (a part of the URL) that will be used to extract the `[skuId]`. +Imagine that you have a page with the following URLs where `[skuId]` can be any of the thousands of products that you have in your database. It would be impractical to create a route for each product. Instead, we need to define a Route Parameter (a part of the URL) that will be used to extract the `[skuId]`. - `https://example.com/sku/[skuId]` - Will match: `https://example.com/sku/1234` @@ -24,7 +24,7 @@ Imagine that you have a page with the following URLs where `[skuId]` can be any ``` -## Retrieving the Path Parameter from the URL +## Retrieving the Route Parameter from the URL Once we have `[skuId]` in the URL, we need a way to retrieve it. This can be done by using `useLocation()` API.