# Homepage content: status: 404, message: "Model not found"

**URL:** <https://forum.builder.io/t/homepage-content-status-404-message-model-not-found/5562>\
**Category:** General\
**Tags:** react\
**Created:** [May 13, 2024, 1:08pm UTC](https://forum.builder.io/t/homepage-content-status-404-message-model-not-found/5562 "2024-05-13T13:08:16Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![king2nd23](https://avatars.discourse-cdn.com/v4/letter/k/bb73d2/32.png) [@king2nd23](https://forum.builder.io/u/king2nd23)\
**Post date:** [May 13, 2024, 1:08pm UTC](https://forum.builder.io/t/homepage-content-status-404-message-model-not-found/5562/1 "2024-05-13T13:08:17Z")

</div>

Getting {“status”:404,“message”:“Model not found”} when fetching builder content

**Request URL**  
[https://cdn.builder.io/api/v3/query/25b1a215ae9f430989a220ee58457f96/homepage?omit=meta.componentsUsed&apiKey=25b1a215ae9f430989a220ee58457f96&userAttributes.urlPath=%2F&userAttributes.host=localhost%3A3000&userAttributes.device=desktop&options.homepage.model="homepage"](https://cdn.builder.io/api/v3/query/25b1a215ae9f430989a220ee58457f96/homepage?omit=meta.componentsUsed&apiKey=25b1a215ae9f430989a220ee58457f96&userAttributes.urlPath=%2F&userAttributes.host=localhost%3A3000&userAttributes.device=desktop&options.homepage.model=%22homepage%22)

**Payload**

1. omit: meta.componentsUsed
2. apiKey: 25b1a215ae9f430989a220ee58457f96
3. userAttributes.urlPath: /
4. userAttributes.host: localhost:3000
5. userAttributes.device: desktop
6. options.homepage.model: “homepage”

**Builder content link**  
localhost.3000

**Builder public api key**  
25b1a215ae9f430989a220ee58457f96

**What are you trying to accomplish**  
Using a React component for my homepage that fetches the [Builder.io](http://Builder.io) content and renders it using the `BuilderComponent` .

**Code stack you are integrating Builder with**  
React

**Reproducible code example**

```auto
import React, { useEffect, useState } from 'react'
import { BuilderComponent, builder } from "@builder.io/react"

builder.init( `25b1a215ae9f430989a220ee58457f96` )

export const HomeScreen = () => {
  const [homepage, setHomepage] = useState( null )

  useEffect( () => {
    builder
      .get( `homepage` )
      .toPromise()
      .then( ( homepageData ) => {
        console.warn( homepageData )
        setHomepage( homepageData )
      })
  }, [] )

  return (
    <div className="pb-20">
      {homepage && <BuilderComponent model="page" content={homepage} />}
    </div>
  )
}

export default HomeScreen

```

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [May 13, 2024, 1:37pm UTC](https://forum.builder.io/t/homepage-content-status-404-message-model-not-found/5562/2 "2024-05-13T13:37:47Z")

</div>

Hello @king2nd23,

Welcome to the [Builder.io](http://Builder.io) forum post.

It appears that there is an issue with the . I have noticed that your page model name is ‘homepage’, but the builder content has been defined with model=“page”. To resolve this issue, please update the BuilderComponent as shown below:

```auto
    <div className="pb-20">
      {homepage && <BuilderComponent model="homepage" content={homepage} />}
    </div>

```

---

<div class="post-metadata">

**Author:** ![king2nd23](https://avatars.discourse-cdn.com/v4/letter/k/bb73d2/32.png) [@king2nd23](https://forum.builder.io/u/king2nd23)\
**Post date:** [May 13, 2024, 3:27pm UTC](https://forum.builder.io/t/homepage-content-status-404-message-model-not-found/5562/3 "2024-05-13T15:27:37Z")

</div>

Thank you manish-sharma, I created a new homepage model and changed the model attribute to “homepage”, that fixed my issue.

I do one more follow up question.

I want to test the new homepage implementation on a lower environment (dev). In my project I am using react router and I have the HomeScreen element as mentioned early set to the path “/”. I also have the builder page set to the path “/” but have not published it because I do not know if that will affect my current homepage.

```auto
const routes = [
  {
    path: `/`,
    element: <HomeScreen />

  }

```

My question is will the paths in my react codebase(router and HomeScreen component) need to match the path that is set in the builder page editor in order for the builder page to render as my homepage?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [May 13, 2024, 3:34pm UTC](https://forum.builder.io/t/homepage-content-status-404-message-model-not-found/5562/4 "2024-05-13T15:34:22Z")

</div>

Hello @king2nd23,

You can create a catch-all route for other pages, like shown in the below example

```auto
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import { Switch, Route, BrowserRouter, Link } from 'react-router-dom';
import { BuilderComponent, builder, useIsPreviewing } from '@builder.io/react';

import './index.css';

// Put your API key here
builder.init('YOUR_API_KEY');

function App() {
  const [allPages, setAllPages] = useState([]);

  useEffect(() => {
    async function getStaticProps() {
      const pages = await builder.getAll('page', {
        fields: 'data.url,name',
        options: { noTargeting: true },
      });
      setAllPages(pages);
    }
    getStaticProps();
  }, []);

  return (
    <BrowserRouter>
      <header>
        <div className="logo">MY SITE</div>
        <div className="links">
          <Link className="link" to="/">
            Home
          </Link>
          <Link className="link" to="/about">
            About
          </Link>
          {allPages.map(page => {
            return (
              <Link className="link" to={page.data.url}>
                {page.name}
              </Link>
            );
          })}
          <Link className="link" to="/404">
            404
          </Link>
        </div>
      </header>
      <div className="App">
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" exact component={About} />
          <Route render={({ location }) => <CatchAllRoute key={location.key} />} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default function CatchAllRoute() {
  const isPreviewingInBuilder = useIsPreviewing();
  const [notFound, setNotFound] = useState(false);
  const [content, setContent] = useState(null);

  // get the page content from Builder
  useEffect(() => {
    async function fetchContent() {
      const content = await builder
        .get('page', {
          url: window.location.pathname,
        })
        .promise();

      setContent(content);
      setNotFound(!content);
    }
    fetchContent();
  }, []);

  // if no page is found, return a 404 page
  if (notFound && !isPreviewingInBuilder) {
    return <NotFound />; // Your 404 content
  }

  // return the page when found
  return (
    <>
      {/* Render the Builder page */}
      <BuilderComponent model="page" content={content} />
    </>
  );
}

const Home = () => <h1>I am the homepage!</h1>;
const About = () => <h1>I am the about page!</h1>;
const NotFound = () => <h1>No page found for this URL, did you publish it?</h1>;

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

```

> <https://github.com/BuilderIO/builder/blob/main/examples/react-js/src/main.jsx>