Can't get the symbols and pages to properly sync with visual builder

Technical Questions
1

Website: http://creditcurve.ai/ (please use http)

I have been trying to get this to properly link so I can create new pages with the Visual Builder but I can only get a single page to render

Essentially when I’m using code provided by you from git, then I use my API key and connect it to the builder.io then I write code in my react-app this code is not editable when it’s loaded on builder.io. but the rest of the page will be editable on the builder.io.

I have read blogs as well and registered custom components but when it’s loaded on builder.io it remains uneditable.

Any advice would be greatly appreciated.

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import { BuilderComponent } from '@builder.io/react';
import './index.css';

export default function App() {
  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>

          <Link className="link" to="/404">
            404
          </Link>
            <input type={'text'} />
        </div>
      </header>
      <div className="App">
        <Routes>
          <Route path="/" element={<BuilderPage model="page" /> }/>
          <Route path="/404" element={<NotFound />} />
          {/* Add more Route components as needed */}
        </Routes>
      </div>
    </BrowserRouter>
  );
}

const BuilderPage = ({ model }) => (
  <BuilderComponent apiKey="xyz" model={model}>
    <div className="loading">Loading...</div>
  </BuilderComponent>
);

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

Hello @CreditCurve.ai,

Regarding your header component code, it won’t be directly editable within the builder. To make it editable, you’ll need to register it as a custom component.

Additionally, to ensure the functionality across all pages, I recommend checking out our CatchAllRoute example here. This should provide guidance on ensuring seamless integration