How to use SolidJS Router? What advanced features does it have?

SolidJS Router provides powerful client-side routing capabilities:

Basic Usage:

javascript
import { Router, Route, Routes } from '@solidjs/router';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/users/:id" component={User} />
      </Routes>
    </Router>
  );
}

Route Parameters:

javascript
function User() {
  const params = useParams();
  const userId = () => params.id; // Reactive access
  
  return <div>User ID: {userId()}</div>;
}

Navigation:

javascript
import { useNavigate, Link, A } from '@solidjs/router';

function Navigation() {
  const navigate = useNavigate();
  
  const handleClick = () => {
    navigate('/about'); // Programmatic navigation
  };
  
  return (
    <nav>
      <Link href="/">Home</Link> {/* Using Link component */}
      <A href="/about">About</A> {/* Using A component (lighter) */}
      <button onClick={handleClick}>Go to About</button>
    </nav>
  );
}

Nested Routes:

javascript
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" component={Layout}>
          <Route path="/" component={Home} />
          <Route path="/about" component={About} />
        </Route>
      </Routes>
    </Router>
  );
}

function Layout(props) {
  return (
    <div>
      <Header />
      {props.children}
      <Footer />
    </div>
  );
}

Route Guards:

javascript
function ProtectedRoute(props) {
  const isAuthenticated = createMemo(() => checkAuth());
  
  return (
    <Show when={isAuthenticated()}>
      {props.children}
    </Show>
  );
}

Data Preloading:

javascript
const [data] = createResource(fetchData);

function DataRoute() {
  return (
    <Show when={!data.loading} fallback={<Loading />}>
      <div>{data().content}</div>
    </Show>
  );
}