Integrate Builder.io with React Router 7

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

Builder public api key
224e10d70d124181afb2caeb280bebda

What are you trying to accomplish
Integrate builder.io page builder with react router 7.

  1. I initialized a new react router 7 project:
    npx create-react-router@latest builder-io-rr7

  2. Then I installed builder devtools:
    npm init builder.io@latest

  3. ran:
    npm run dev

  4. Connected to a brand new space, url above.

  5. I navigated to:
    http://localhost:5173/builder-demo

    And I got a 404 Error page.
    The builder-demo page is there and published.

Everything is default, no modifications and it does not work.
I did notice the following files in my app root:

  • builder-page.tsx
  • builder-registry.ts
    Not sure if they should have been put somewhere else.

Code stack you are integrating Builder with
react router 7.9.1

Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!

2

Hello @k9coder,

It looks like some corrections are needed in the code to get the Builder integration working with React Router 7. The Builder dev-tools require certain updates to be automatically integrated when using npm init builder.io@latest.

I’ve updated the code and successfully got the Builder integration working with React Router 7. You can refer to the following GitHub repository for reference:

Please feel free to review the changes and let me know if you have any questions.

Best regards,

3

Hello,

I was able to get this to work.

Thank you!

4

Welll, just to be clear, your code updates fixed the problem. Thanks!

1 Like