If you want AVIOU to work properly in your SPA with client-side routing and dynamic change of catalogues in a single component, you need to use the AVIOU web-component.
There are 2 snippets you need to add to your codebase in order to make the SPA solution work on your site. You'll find the snippets in the settings page of you publication:
On the settings page, scroll down to "Embed code" and then click "SPA embed":
Here you find the 2 HTML snippets you need. The first snippet is a script tag that loads the code of the catalogue engine. The second snippet is a web-component that renders the catalogue.
The script tag
Embed the script once into your solution. The script snippet should look something like this:
<script type="text/javascript" src="https://publish.aviou.io/assets/latest-stable/web-component.js" />
It's only required to be placed once into your codebase and we recommend to place it at the bottom of the body tag, preferably right after closing the body tag, in order to make it load properly with the rest of your application.
The web-component
Embed the web-component in the DOM wherever you want your catalogue to render:
<av-catalogue id="your-publication-id" url="url-to-your-standalone-catalogue"></av-catalogue>
Remember to provide the publication id as well as the url for the standalone catalogue. You can render as many catalogues in a single page as you want and you can also dynamically update the attributes (id and url), if you want to switch between catalogues.
The ID of your publication can be found in the URL, when you are editing the publication via live-editor.
Example
Here is an example of an implementation of AVIOU in a Next.js app with TypeScript:
https://github.com/aviou-io/spa-example
Feel free to clone the example down to your machine and run:
yarn && yarn dev
There are different examples of AVIOU catalogues embedded into React components and examples of routing between them.