What are some examples of using Svelte Router?

What are some examples of using Svelte Router?

Svelte Router is a powerful tool for managing routes in Svelte applications. Here are a few examples:

1. Basic Routing: You can set up simple routes using the <Router> component to navigate between different pages.
2. Nested Routes: Svelte Router allows you to create nested routes, which is useful for complex applications.
3. Dynamic Routing: You can create dynamic routes that change based on user input or data.
4. Route Guards: Implement route guards to protect certain routes based on user authentication.

Can you show me a code example for basic routing?

Sure! Here's a simple example of basic routing in Svelte:

<script>
  import { Router, Route, Link } from 'svelte-routing';
</script>

<Router>
  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
  </nav>

  <Route path="/" component={Home} />
  <Route path="/about" component={About} />
</Router>

<script>
  import Home from './Home.svelte';
  import About from './About.svelte';
</script>

What about nested routes?

For nested routes, you can structure your components like this:

<Router>
  <nav>
    <Link to="/dashboard">Dashboard</Link>
    <Link to="/dashboard/settings">Settings</Link>
  </nav>

  <Route path="/dashboard" component={Dashboard} />
  <Route path="/dashboard/settings" component={Settings} />
</Router>

How do I handle dynamic routes?

Dynamic routes can be handled by using parameters in the path. For example:

<Route path="/user/:id" component={UserProfile} />

In the UserProfile component, you can access the id parameter using params.