like-gold•2mo ago

Documen Title Handler

How can I handle a "Page Not Found" scenario in my application so that when the user lands on a non-existent page, the browser tab title updates to display "Not Found"?

2 Replies

kapa.ai•2mo ago

Hi @alfa. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To handle a "Page Not Found" scenario in your refine application and update the browser tab title to display "Not Found", you can use a combination of routing and the DocumentTitleHandler component. Here's how you can achieve this: 1. First, set up a catch-all route for handling 404 errors. You can do this by adding a wildcard route (*) at the end of your route definitions:

<Route path="*" element={<ErrorComponent />} />

<Route path="*" element={<ErrorComponent />} />

This will render an ErrorComponent for any undefined routes Handling 404s (https://refine.dev/docs/routing/integrations/react-router/#handling-404s). 2. Next, use the DocumentTitleHandler component to customize the title generation process. You can add this component to your App.tsx file:

import { DocumentTitleHandler } from "@refinedev/react-router-v6";

const App = () => {
  return (
    <BrowserRouter>
      <Refine
        /* ... other Refine props ... */
      >
        {/* ... your routes ... */}
        <DocumentTitleHandler
          handler={({ action, params, resource }) => {
            if (action === undefined && resource === undefined) {
              return "Not Found | Your App Name";
            }
            // ... other title generation logic ...
          }}
        />
      </Refine>
    </BrowserRouter>
  );
};

import { DocumentTitleHandler } from "@refinedev/react-router-v6";

const App = () => {
  return (
    <BrowserRouter>
      <Refine
        /* ... other Refine props ... */
      >
        {/* ... your routes ... */}
        <DocumentTitleHandler
          handler={({ action, params, resource }) => {
            if (action === undefined && resource === undefined) {
              return "Not Found | Your App Name";
            }
            // ... other title generation logic ...
          }}
        />
      </Refine>
    </BrowserRouter>
  );
};

In this example, we're using the handler prop of DocumentTitleHandler to customize the title generation How to change the document title? (https://refine.dev/docs/routing/integrations/react-router/#how-to-change-the-document-title). When both action and resource are undefined, it means we're on an unknown route, so we return "Not Found" as the title. 3. Make sure your ErrorComponent doesn't set its own title using hooks like useDocumentTitle, as this would override the title set by DocumentTitleHandler. By implementing these steps, when a user lands on a non-existent page, the browser tab title will update to display "Not Found | Your App Name" (or whatever title you choose to set for 404 pages). Remember to adjust the implementation based on your specific routing setup and requirements. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@884091049247645746> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Documen Title Handler

Did you find this page helpful?