Get Started

Setting up routing does not require a route config file, wrapper framework, or build tool. A small app can be fully routed with HTML tags, and a larger app can move each view into lazy HTML or JavaScript route files.

Let's build a simple multi-tab dashboard step-by-step:

Step 1: Add the Scripts

Import the required scripts. The Router relies on @beforesemicolon/web-component for the underlying custom element behavior:

1<script src="https://unpkg.com/@beforesemicolon/web-component/dist/client.js"></script>2<script src="https://unpkg.com/@beforesemicolon/router/dist/client.js"></script>

Step 2: Declare Navigation Links

Create navigation links using the <page-link> tag. Use the path attribute to point to specific URLs and title to specify the document title:

1<nav>2    <page-link path="/" title="Home Dashboard">Home</page-link>3    <page-link path="/todos" title="Todo Manager">Todos</page-link>4    <page-link path="/contact" title="Get in Touch">Contact</page-link>5</nav>

Step 3: Define Page Routes

Wrap your page views inside <page-route> tags. The contents of these elements will only render when the browser pathname matches their path attribute:

1<!-- Home Page -->2<page-route path="/">3    <h1>Welcome Home</h1>4    <p>This is the default dashboard view.</p>5</page-route>6 7<!-- Todo Page (exact path matching) -->8<page-route path="/todos">9    <h1>Your Todos</h1>10    <p>Manage your daily activities here.</p>11</page-route>12 13<!-- Contact Page -->14<page-route path="/contact">15    <h1>Contact Us</h1>16    <p>Send us an email at contact@example.com</p>17</page-route>

Step 4: Handle 404s and Redirects

To redirect users when they navigate to an unregistered or invalid URL, define a 404 route and a <page-redirect> at the bottom of your routing list:

1<!-- 404 Fallback page -->2<page-route path="/404">3    <h1>404 - Page Not Found</h1>4</page-route>5 6<!-- Redirects any unknown paths to the 404 page -->7<page-redirect path="/404"></page-redirect>

Next Steps

Now that you have a basic routing layout, you can explore:

• Guide & Best Practices for route structure, redirects, guards, and production conventions.
• Page Route to render params, nested views, loading states, and lazy route files.
• Navigation APIs to navigate programmatically inside JavaScript.
• Route Guards to secure pages with sync or async checks.