diff --git a/contributors.yml b/contributors.yml index 7cd8265fed..bf14f84770 100644 --- a/contributors.yml +++ b/contributors.yml @@ -41,6 +41,7 @@ - arjunyel - arka1002 - Armanio +- ArnasDon - arnassavickas - aroyan - arpitjain099 @@ -50,6 +51,7 @@ - AviVahl - awreese - aymanemadidi +- ayushchaudhary - ayushmanchhabra - babafemij-k - bangseongbeom @@ -224,6 +226,7 @@ - jplhomer - jrakotoharisoa - jrestall +- JSap0914 - juanpprieto - jungwoo3490 - justjavac diff --git a/docs/api/framework-conventions/entry.server.tsx.md b/docs/api/framework-conventions/entry.server.tsx.md index aa9e854162..cbad2a1c67 100644 --- a/docs/api/framework-conventions/entry.server.tsx.md +++ b/docs/api/framework-conventions/entry.server.tsx.md @@ -145,11 +145,9 @@ _Note that you generally want to avoid logging when the request was aborted, sin **Streaming Rendering Errors** -When you are streaming your HTML responses via [`renderToPipeableStream`][rendertopipeablestream] or [`renderToReadableStream`][rendertoreadablestream], your own `handleError` implementation will only handle errors encountered during the initial shell render. If you encounter a rendering error during subsequent streamed rendering you will need to handle these errors manually since the React Router server has already sent the Response by that point. +When you are streaming your HTML responses via [`renderToReadableStream`][rendertoreadablestream], your own `handleError` implementation will only handle errors encountered during the initial shell render. If you encounter a rendering error during subsequent streamed rendering you will need to handle these errors manually since the React Router server has already sent the Response by that point. You can handle these errors in the `onError` callback function. -For `renderToPipeableStream`, you can handle these errors in the `onError` callback function. You will need to toggle a boolean in `onShellReady` so you know if the error was a shell rendering error (and can be ignored) or an async - -For an example, please refer to the default [`entry.server.tsx`][node-streaming-entry-server] for Node. +For an example, please refer to the default [`entry.server.tsx`][streaming-entry-server]. **Thrown Responses** @@ -160,5 +158,5 @@ Note that this does not handle thrown `Response` instances from your `loader`/`a [streaming]: ../../how-to/suspense [rendertopipeablestream]: https://react.dev/reference/react-dom/server/renderToPipeableStream [rendertoreadablestream]: https://react.dev/reference/react-dom/server/renderToReadableStream -[node-streaming-entry-server]: https://github.com/remix-run/react-router/blob/main/packages/react-router-dev/config/defaults/entry.server.node.tsx +[streaming-entry-server]: https://github.com/remix-run/react-router/blob/main/packages/react-router-dev/config/defaults/entry.server.tsx [templates-repo]: https://github.com/remix-run/react-router-templates diff --git a/docs/api/hooks/useMatches.md b/docs/api/hooks/useMatches.md index 0fa0f79181..4a43c71eaa 100644 --- a/docs/api/hooks/useMatches.md +++ b/docs/api/hooks/useMatches.md @@ -26,6 +26,29 @@ Returns the active route matches, useful for accessing `loaderData` for parent/child routes or the route [`handle`](../../start/framework/route-module#handle) property +Pairing the route `handle` with `useMatches` gets very powerful since you can put +whatever you want on a route handle and have access to `useMatches` anywhere. +Please see the [handle](../../how-to/using-handle) documentation for an example +of breadcrumbs via `useMatches`/`handle`. + +```tsx +import { useMatches } from "react-router"; + +function SomeComponent() { + const matches = useMatches(); + // matches[i].id // route id + // matches[i].pathname // the portion of the URL the route matched + // matches[i].params // the parsed params from the URL + // matches[i].loaderData // the data from the loader + // matches[i].handle // the route handle with any app specific data +} +``` + +useMatches only works with a data router like `createBrowserRouter`, +since they know the full route tree up front and can provide all of the current +matches. Additionally, `useMatches` will not match down into any descendant route +trees since the router isn't aware of the descendant routes. + ## Signature ```tsx diff --git a/docs/start/framework/deploying.md b/docs/start/framework/deploying.md index 16194ef1cc..a7a57e6f22 100644 --- a/docs/start/framework/deploying.md +++ b/docs/start/framework/deploying.md @@ -98,3 +98,7 @@ EdgeOne Pages maintains their own template for React Router. Checkout the [EdgeO ### DeployHQ DeployHQ maintains their own guide for deploying React Router to your own server. Checkout the [DeployHQ Guide](https://www.deployhq.com/guides/deploy-react-router-from-github) for more information. + +### Hostinger + +Hostinger supports deploying React Router applications with server rendering on its managed Node.js hosting, including automatic deployments from GitHub. Checkout the [Hostinger Guide](https://www.hostinger.com/web-apps-hosting/react-router-hosting) for more information. diff --git a/integration/defer-test.ts b/integration/defer-test.ts index 945683bce3..a016b6abb6 100644 --- a/integration/defer-test.ts +++ b/integration/defer-test.ts @@ -35,7 +35,7 @@ function counterHtml(id: string, val: number) { return `

${val}

`; } -const deferredHTMLStartString = "