Concepts

布局

为了保持应用程序页面的一致性，你可以使用布局。布局是包装路由内容的组件，可用于为所有页面或应用程序的特定部分定义通用结构。

根级布局

根级布局作为应用程序中所有路由的容器。要定义根级布局，请将布局组件传递给 Router 组件的 root prop：

import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";

import Home from "./pages/Home";

const Layout = (props) => {
    return (
        <>
            <header>Header</header>
            {props.children}
            <footer>Footer</footer>
        </>
    );
};

render(
    () => (
        <Router root={Layout}>
            <Route path="/" component={Home} />
            <Route path="/hello-world" component={() => <div>Hello world!</div>} />
        </Router>
    ),
    document.getElementById("app")
);

使用根级布局，props.children 将被替换为当前路由的内容。这意味着虽然 Header 和Footer 会在每个页面上显示，但它们之间的内容会根据当前路由而改变。例如，当路由是 /hello-world 时，你会在页眉和页脚之间看到文本 Hello world!

嵌套布局

当你想要创建一个特定于一组路由的布局时，你可以在布局组件中嵌套路由。这可以通过将 props.children 传递给定义嵌套路由的组件来实现：

function PageWrapper(props) {
  return (
    <div>
      <h1> We love our users! </h1>
      {props.children}
      <A href="/">Back Home</A>
    </div>
  );
}

虽然路由配置保持不变，但路由的元素将出现在声明 props.children 的父元素内部。要将 PageWrapper 用作布局，在这种情况下，你可以将其作为组件传递给父路由：

<Router>
    <Route path="/users" component={PageWrapper}>
        <Route path="/" component={Users} />
        <Route path="/:id" component={User} />
    </Route>
</Router>

现在，当路由是 /users 时，Users 组件的内容将显示在 PageWrapper 组件内部。同样，当导航到 /users/1 时，User 组件的内容也将显示在 PageWrapper 组件内部。

报告此页面问题