Page paths not working on webhost with React

Technical Questions
1

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link
https://tandklinik-19.vercel.app/

Builder public api key
d5b3d969164242079a1b075ea49642ec

What are you trying to accomplish
Landing page & pages with paths works fine on local enviroment (localhost) but when uploaded to a webhost such as Netlify or Vercel, I get error 404 from the webhost. Landing page works fine.

Landing page: https://tandklinik-19.vercel.app/
Page with path: https://tandklinik-19.vercel.app/porslinskronor-fasader (not working)

Code stack you are integrating Builder with
React

Reproducible code example
My app.jsx

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);

      // if the page title is found,
      // set the document title
      if (content?.data.title) {
        document.title = content.data.title;
      }
    }
    fetchContent();
  }, [window.location.pathname]);

  // If no page is found, return
  // a 404 page from your code.
  // The following hypothetical
  // <FourOhFour> is placeholder.
  if (notFound && !isPreviewingInBuilder) {
    return <div>Not found</div>;
  }

  return (
    <div className='w-full'>
      <BuilderComponent model='page' content={content} />
    </div>
  );
}
2

Hello @nnabil214,

Is this working fine on the local setup? Can you create a build version locally and see if that throws a similar error or not?

3

image
image830×472 9.04 KB

image
image693×32 2.09 KB

When building a local build it gives me same error. Only time this works is with localhost in dev enviroment.

4

Hello @nnabil214,

You are able to access the landing page fine right?

You can try changing the builder API version by adding the below code

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

builder.apiVersion = "v1"; // add this below builder.init

Let us know how that works for you.

5

It did not work, same 404 error

6

Did you have an idea what could be wrong? @manish-sharma

7

Hello @nnabil214,

Would you be able to share the code sandbox of your app?

9

I solved it by this post reactjs - Routes not working properly in React using Vite (ON BUILD) - Stack Overflow