Navigation links not working on deployed website

Issues
1

hey

I have a website I’ve built using plasmic, and I love the process because it mirrors design very very closely, only issue I seem to be having is the Nav links dont seem to be working anywhere else except for the plasmic test site i.e https://auxano.plasmic.run I’ve also deployed on vercel but the navigation links dont work there please see https://auxano-refresh.vercel.app/ any help would be useful

2

Hi! what framework are you using when you publish to vercel? It doesn’t seem to be next?

3

im using react

4

is it just plain react? which routing framework are you using? are you following this guide for routing with plain react? https://docs.plasmic.app/learn/react-quickstart/

5

hi Chung, I’ve tried to follow this guide, im pretty new to react as well so I think thats what is causing to have issues.

am I meant to use this example as it is?

import {
  initPlasmicLoader,
  PlasmicRootProvider,
  PlasmicComponent,
  ComponentRenderData
} from '@plasmicapp/loader-react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { PLASMIC } from './plasmic-init';

function AppRoot() {
  return (
    <PlasmicRootProvider loader={PLASMIC}>
      <Router>
        <Routes>
          <Route path="/" element={CatchAllPage()} />
        </Routes>
      </Router>
    </PlasmicRootProvider>
  );
}

// We try loading the Plasmic page for the current route.
// If it doesn't exist, then return "Not found."
export function CatchAllPage() {
  const [loading, setLoading] = useState(true);
  const [pageData, setPageData] = useState<ComponentRenderData | null>(null);

  useEffect(() => {
    async function load() {
      const pageData = await PLASMIC.maybeFetchComponentData(location.pathname);
      setPageData(pageData);
      setLoading(false);
    }
    load();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }
  if (!pageData) {
    return <div>Not found</div>;
  }
  // The page will already be cached from the `load` call above.
  return <PlasmicComponent component={location.pathname} />;
}
6

in addition im using plain react, as well as react-router-dom v6

{
  "name": "tmp-cpa",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@plasmicapp/cli": "^0.1.275",
    "@plasmicapp/react-web": "^0.2.210",
    "@plasmicpkgs/antd5": "^0.0.56",
    "@plasmicpkgs/plasmic-nav": "^0.0.104",
    "@plasmicpkgs/plasmic-wordpress": "^0.0.55",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.11.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
7

We recommend using nextjs if you can, as it takes care of things like routing for you and will be more performant in loading Plasmic content. You can get up and running quickly with npx create-plasmic-app@latest and choosing next as your framework