访问 SolidJS Router 中的参数

Question

我正在尝试用 Solid 重写我在 React 中制作的项目。我正在尝试按照文档的建议使用 Solid Router。

到目前为止，这是我的组件。 index.js

import { render } from 'solid-js/web'
import { Router } from '@solidjs/router'

import './index.css'
import App from './App'

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  document.getElementById('root')
)

App.jsx

import Articles from './components/Articles'
import Header from './components/Header'
import styles from './App.module.css'
import Navbar from './components/Navbar'
import Topics from './components/Topics'

function App() {
  return (
    <div className={styles.container}>
      <Header />
      <Navbar />
      <Routes>
        <Route path="/" element={<Articles />} />
        <Route path="/:topic" component={<Topics />} />
      </Routes>
    </div>
  )
}

export default App

Navbar.jsx

import { onMount, createSignal, For } from 'solid-js'
import { NavLink } from '@solidjs/router'
import { getTopics } from '../utils/api'

const Navbar = () => {
  const [topics, setTopics] = createSignal([])

  onMount(() => {
    getTopics().then(({ topics }) => {
      setTopics(topics)
    })
  })

  return (
    <nav>
      <ul>
        <For each={topics()}>
          {topic => (
            <li>
              <NavLink href={`/${topic.slug}`}>{topic.slug}</NavLink>
            </li>
          )}
        </For>
      </ul>
    </nav>
  )
}

export default Navbar

我认为问题似乎出在下面的组件中 Topics.jsx

// Get the params from the url
import { useParams } from '@solidjs/router'
import { createSignal, For, onMount, createResource } from 'solid-js'
import { getTopicArticles } from '../utils/api'


const Topics = () => {
  const { topic } = useParams()
  console.log(topic)

  return (
    <div>
      <h1>{topic}</h1>
    </div>
  )
}

export default Topics

参数似乎无关紧要undefined。我知道 Solid 路由器与 React-Router 并不完全相同，但对于这个简单的示例，我看不出哪里出了问题。

期望的结果是能够单击NavLink组件中的Navbar.jsx并路由到所需的路径，例如http://localhost:3000/cooking并渲染我需要的主题，但参数始终未定义。

这是api调用的结果，api/articles?topic=undefined 期望的结果是使用useParams将param附加在api的末尾，就像我的React版本一样

编辑：下面是Topics.jsx更新到工作版本的组件，不确定这是否是最好的方法。

import { createSignal, For, createEffect } from 'solid-js'
import { useParams } from '@solidjs/router'
import { getTopicArticles } from '../utils/api'
import Article from './Article'

const Topics = () => {
  const params = useParams()

  const [articles, setArticles] = createSignal([])
  const [loading, setLoading] = createSignal(true)

  createEffect(() => {
    setLoading(true)
    getTopicArticles(params.topic).then(({ articles }) => {
      setArticles(articles)
      setLoading(false)
    })
  })

  return (
    <>
      {loading() && <div>Loading...</div>}
      <h2>{params.topic}</h2>
      <For each={articles()}>{article => <Article article={article} />}</For>
    </>
  )
}

export default Topics

Answer 1

useParams可能与从正在响应中返回的对象有关。console.log返回一个空对象，但破坏会输出预期的值。这是因为代理的原因，完全正常。

检索一个反应式、类似商店的对象，其中包含 Route 中定义的当前路由路径参数。 https://github.com/solidjs/solid-router#useparams

对于那些使用的常规查询参数也?id=1&name=John不起作用。useParamsuseSearchParams

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

const Home = () => {
  const [params, setParams] = useSearchParams();
  console.log({ ...params });
  return <div>Home</div>;
};

const Blog = () => {
  const params = useParams();
  console.log({ ...params });
  return <div>Blog {JSON.stringify(params)}</div>;
};

const App = () => {
  return (
    <Router>
      <ul>
        <li>
          <Link href="/?id=1&name=john">Home</Link>
        </li>
        <li>
          <Link href="/blog/js/1">Blog</Link>
        </li>
      </ul>
      <Routes>
        <Route path="/" component={Home} />
        <Route path="/blog/:category/:id" element={Blog} />
      </Routes>
    </Router>
  );
};

render(App, document.getElementById("app")!);

检查https://codesandbox.io/s/solid-router-demo-forked-71ef9x?file=/index.tsx进行现场演示。

另外，我们将组件名称传递给组件 prop，如下所示：

<Route path="/" component={Home} />