Getting Started

基于配置的路由

Solid Router 支持基于配置的路由，无需使用 JSX 设置路由。

要定义单个路由，可以将路由定义对象传递给 <Router> 组件：

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

const routes = {
    path: "/",
    component: lazy(() => import("/routes/index.js")),
}


render(() => <Router>{routes}</Router>, document.getElementById("app"));

在路由定义对象中，必须提供一个 path 属性来定义要匹配的路径，以及一个component 属性来指定当路径匹配时要渲染的组件（或元素）。

要定义多个路由，可以将路由定义对象数组传递给 <Router> 组件：

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

const routes = [
    {
        path: "/",
        component: lazy(() => import("/routes/index.js")),
    },
    {
        path: "/hello-world",
        component: () => <h1>Hello, World!</h1>
    },
    {
        path: "/about",
        component: lazy(() => import("/routes/about.js")),
    }
]


render(() => <Router>{routes}</Router>, document.getElementById("app"));

路由定义对象数组中的每个路径都会与当前 URL 进行匹配，当找到匹配项时，相应的组件将被渲染。在上面的示例中，根路径（/）渲染 Home 页面，路径 /hello-world 渲染一个 h1 元素，路径 /about 渲染 About 组件。

懒加载

使用基于配置的路由时，最佳实践是使用 lazy 组件来异步加载组件。这将通过仅在需要时加载组件来帮助提高应用程序的性能。

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

const routes = [
    {
        path: "/",
        component: lazy(() => import("/routes/index.js")),
    },
    {
        path: "/hello-world",
        component: () => <h1>Hello, World!</h1>
    },
    {
        path: "/about",
        component: lazy(() => import("/routes/about.js")),
    }
]


render(() => <Router>{routes}</Router>, document.getElementById("app"));

要了解有关延迟加载的更多信息，请参阅延迟加载组件页面。

报告此页面问题