面试题：Solid.js中如何进行基本的路由配置以实现页面导航

Question

在Solid.js项目里，假设我们有三个页面：首页（Home）、关于我们（About）和联系我们（Contact）。请描述如何使用Solid.js的路由功能实现这三个页面之间的导航，并简单说明路由配置的关键步骤和相关代码结构。

Answer 1

1. 安装路由库

在Solid.js项目中，通常使用 solid-router 库来实现路由功能。首先确保项目中安装了该库：

npm install solid-router

2. 关键步骤及代码结构

1. 导入必要模块：在应用入口文件（通常是 main.js 或类似文件）中，导入 Router 和 Route 等相关组件。

import { render } from "solid-js/web";
import { Router, Route } from "solid-router";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

2. 设置路由结构：使用 Router 组件包裹应用，并在其中定义 Route 组件来配置每个页面的路径和对应的组件。

render(() => (
  <Router>
    <Route path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
  </Router>
), document.getElementById('root'));

这里，Router 组件是整个路由系统的容器，Route 组件的 path 属性定义了页面的访问路径，component 属性指定了该路径对应的页面组件。

3. 导航实现：在页面中可以通过 Link 组件来实现页面间的导航。例如，在 Home 组件中添加到 About 页面的导航：

import { Link } from "solid-router";

const Home = () => {
  return (
    <div>
      <h1>首页</h1>
      <Link href="/about">关于我们</Link>
    </div>
  );
};

export default Home;

Link 组件的 href 属性设置为目标页面的路径，当用户点击链接时，会触发路由导航，显示对应的页面。