Getting Started

组件路由

在 Solid Router 中，路由可以直接在应用程序的模板中使用 JSX 定义。这是在 Solid Router 中定义路由最常见的方式。

要使用 JSX 定义路由，需要为每个要定义的路径在 <Router> 组件中添加 Route

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

import Home from "./routes/Home";

render(
    () => (
        <Router>
            <Route path="/" component={Home} />
        </Router>
    ),
    document.getElementById("app")
);

Route 组件接收一个 path 属性作为要匹配的路径，和一个 component prop 用于传递在路径匹配时要渲染的组件（或元素）。

在上面的示例中，当用户导航到根路径 / 时，会渲染 Home 页面。

要在路由器中应用多个路由，请在 Router 中添加额外的 Route 组件：

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

import Home from "./routes/index.jsx";
import About from "./routes/about.jsx";

render(
    () => (
        <Router>
            <Route path="/" component={Home} />
            <Route path="/hello-world" component={() => <h1>Hello World!</h1>} />
            <Route path="/about" component={About} />
        </Router>
    ),
    document.getElementById("app")
);

此示例定义了三个路由：根路径（/）渲染 Home 页面，路径 /hello-world 渲染一个 h1 元素，以及路径 /about 渲染 About 组件。

报告此页面问题