From 4f18028d06363070aa811a63801d79e2ed11f897 Mon Sep 17 00:00:00 2001 From: Arjaan Buijk <16159200+ArjaanBuijk@users.noreply.github.com> Date: Mon, 27 Dec 2021 13:54:42 -0500 Subject: [PATCH] Change extension of 'src/routes/invoice.js' to 'jsx' (#8536) --- docs/getting-started/tutorial.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/getting-started/tutorial.md b/docs/getting-started/tutorial.md index 19d9bfb958..d2eae1530f 100644 --- a/docs/getting-started/tutorial.md +++ b/docs/getting-started/tutorial.md @@ -376,9 +376,9 @@ The `"*"` has special meaning here. It will match only when no other routes do. ## Reading URL Params -Alright, back to the individual invoice URLs. Let's add a route for a specific invoice. We just visited some URLs like `"/invoices/1998"` and `"/invoices/2005"`, let's make a new component at `src/routes/invoice.js` to render at those URLs: +Alright, back to the individual invoice URLs. Let's add a route for a specific invoice. We just visited some URLs like `"/invoices/1998"` and `"/invoices/2005"`, let's make a new component at `src/routes/invoice.jsx` to render at those URLs: -```js filename=src/routes/invoice.js +```js filename=src/routes/invoice.jsx export default function Invoice() { return

Invoice #???

; } @@ -450,7 +450,7 @@ export default function Invoices() { Okay, let's close the circle here. Open up the invoice component again and let's get the `:invoiceId` param from the URL: -```ts lines=[1,4] filename=src/routes/invoice.js +```ts lines=[1,4] filename=src/routes/invoice.jsx import { useParams } from "react-router-dom"; export default function Invoice() { @@ -481,9 +481,9 @@ export function getInvoice(number) { } ``` -And now back in `invoice.js` we use the param to look up an invoice and display more information: +And now back in `invoice.jsx` we use the param to look up an invoice and display more information: -```js filename=routes/invoice.js lines=[2,6] +```js filename=routes/invoice.jsx lines=[2,6] import { useParams } from "react-router-dom"; import { getInvoice } from "../data";