访问SolidJS路由器中的参数

Question

我正在试图重写一个项目，我所做的反应坚实。我试图使用坚实的路由器，如文档所建议的。

到目前为止，这是我的部件。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 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 { 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下面的组件中

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。我知道固体路由器和React不完全一样--路由器，但是对于这个简单的例子，我看不出我在哪里出错。

所需的结果是能够单击Navbar.jsx组件中的Navbar.jsx，并将其路由到所需的路径，例如http://localhost:3000/cooking并呈现我所需的主题，但params总是未定义的。

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

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

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返回一个空对象，但析构输出的值与预期相同。那是因为代理和完全正常。

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

另外，对于那些使用?id=1&name=John的人来说，像useParams这样的常规查询参数不适用于useSearchParams。

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的现场演示。

此外，我们将组件名称传递给组件支柱，如下所示：

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