SolidJS Router 如何使用？有哪些高级特性？ - 面试题

SolidJS Router 提供了强大的客户端路由功能：

基本使用：

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>
  );
}

路由参数：

javascript
function User() {
  const params = useParams();
  const userId = () => params.id; // 响应式访问
  
  return <div>User ID: {userId()}</div>;
}

导航：

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

function Navigation() {
  const navigate = useNavigate();
  
  const handleClick = () => {
    navigate('/about'); // 编程式导航
  };
  
  return (
    <nav>
      <Link href="/">Home</Link> {/* 使用 Link 组件 */}
      <A href="/about">About</A> {/* 使用 A 组件（更轻量） */}
      <button onClick={handleClick}>Go to About</button>
    </nav>
  );
}

嵌套路由：

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>
  );
}

路由守卫：

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

数据预加载：

javascript
const [data] = createResource(fetchData);

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