SPA Routing

Simple, lightweight routing for SPAs.
View Demo · Report Bug · Request Feature

About The Project

Turn your web app into a Single Page App quickly and easily without tons of refactoring or tight coupling.

(back to top)

Prerequisites

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.

Example (express.js)

app.get(/.*/, (req, res) => {
  res.sendFile(`${__dirname}/index.html`);
});

(back to top)

Installation

CDN

<script
  src="https://cdn.jsdelivr.net/npm/spa-routing@latest"
  type="module"
></script>

(back to top)

Usage

1. (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>

2. Wrap route content in the <spa-route> tag, with an appropriate path attribute value.

   <spa-route path="/home">
     <h1>Home</h1>
     ...
   </spa-route>

3. Add links to those route(s).

   <a href="/home">Home</a>

4. Style <spa-route> elements in active/inactive states using the active attribute.

   spa-route:not([active]) {
     display: none;
   }

(back to top)

Contributing

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!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)