Turn your web app into a Single Page App quickly and easily without tons of refactoring or tight coupling.
For initial navigation to your routes (i.e. visiting example.com/route
directly) to work, you'll need to configure your server to direct all traffic to your app.
app.get(/.*/, (req, res) => {
res.sendFile(`${__dirname}/index.html`);
});
<script
src="https://cdn.jsdelivr.net/npm/spa-routing@latest"
type="module"
></script>
-
(OPTIONAL) Set the root of your app, if it's not the same as the origin.
<script type="module"> import { setRoot } from "https://cdn.jsdelivr.net/npm/spa-routing@latest"; setRoot("/example/root"); </script>
-
Wrap route content in the
<spa-route>
tag, with an appropriatepath
attribute value.<spa-route path="/home"> <h1>Home</h1> ... </spa-route>
-
Add links to those route(s).
<a href="/home">Home</a>
-
Style
<spa-route>
elements in active/inactive states using theactive
attribute.spa-route:not([active]) { display: none; }
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Distributed under the MIT License. See LICENSE
for more information.