如何在solidjs路由器中使用多个路由

Question

我用solid-js制作了这个应用程序，我的代码如下：

import type { Component } from 'solid-js';
import { lazy } from 'solid-js';
import  './App.module.css';
import { Routes, Route } from '@solidjs/router';
import Home from './pages/Home';
import BlogPage from './pages/blogPage';

const App: Component = () => {
  return (
   <>
    <Routes>
     <Route path='/' component={Home} />
     <Route path='/blogpage' component={BlogPage} />
    </Routes>
  </>
 );
};

导出默认应用程序；

即使在将组件更改为元素并将其编写为

<Route path='/' element={<Home />} />
<Route path='/blogpage' element={<BlogPage />} />

我也尝试过懒惰的方法，但没有奏效。它显示的输出仅用于Home组件。即使在搜索之后，文档中也没有对此做出任何解释。

Answer 1

您的应用程序很少有问题。首先，您需要将应用程序包装在Router组件中。

我们需要链接导航到指定的目录，以便检查它们是否正确工作。

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

const Home = () => {
  return <div>Home</div>;
};

const Blog = () => {
  return <div>Blog</div>;
};

const App: Component = () => {
  return (
    <Router>
      <ul>
        <li>
          <Link href="/">Home</Link>
        </li>
        <li>
          <Link href="/blog">Blog</Link>
        </li>
      </ul>
      <Routes>
        <Route path="/" component={Home} />
        <Route path="/blog" component={Blog} />
      </Routes>
    </Router>
  );
};

render(() => <App />, document.getElementById("app"));

下面是https://codesandbox.io/s/solid-counter-forked-f1bfk2的一个工作演示

您可以在https://github.com/solidjs/solid-router上查看可靠的路由器文档。