从 URL 参数调用 API

Question

我正在使用最新版本的 React Router，并且想从 URL 字符串中获取一些可选参数。

有两个参数，

appTypeId

和

submissionId

，它们都是可选的，但它们要么都存在，要么都不存在。

网址看起来像这样

/appTypeId=1111&submissionId=9999

。

当我创建路由器时，我声明路径如下：

const router = createBrowserRouter([
  {
    path: '/appTypeId=:appTypeId&submissionId=:submissionId?',
    element: <AppLayout />,
    id: 'root',
    loader: defaulNewAPIs,
    children: [
      {
        index: true,
        element: <ReferralDetails status="new" />,
        // loader: defaulNewAPIs,
      },
    ],
  },
])

我想利用

appTypeID

和

submissionId

进行 api 调用，但我收到浏览器错误，告诉我没有匹配的路线。

首先，整个 URL 字符串应该是可选的，因此即使 URL 字符串为空，内容也应该呈现。

其次，我不确定为什么这个 URL

/appTypeId=1111&submissionId=9999

与根元素路由不匹配。

最后，我想知道

useParams

是否是处理此类路线的正确方法。我看到 React Router 有一个

useSearchQuery

功能，我想也许他们有更好的方法来处理这样的路由。

Answer 1

这是你可以做的

const router = createBrowserRouter([
  {
    path: '/',
    element: <AppLayout />,
    id: 'root',
    loader: defaulNewAPIs,
    children: [
      {
        index: true,
        element: <ReferralDetails status="new" />,
        // loader: defaulNewAPIs,
      },
    ],
  },
])

如果您的网址是

localhost:3000/?appTypeId=random4545&submissionId=your-submission-id

// We are component which will render root of page like /localhost:3000' 

import {
  useSearchParams,
} from 'react-router-dom';

const ReferralDetails = () => {
  const [search, setSearch] = useSearchParams();
  
  funtion updateQueryParams () {
   setSearch({appTypeId : "your-desired-updated-app-id" ,submissionId:"your- 
  desired-updated-updated-id})
  }


  return (
    <div>
      <p>appTypeId : {search.get("appTypeId")}</p>  {/* This p tag will return appTypeId : random4545  */}
      <p>submissionId: {search.get("submissionId")}</p> {/* This p tag will return submissionId: your-submission-id */}
      <button onclick={updateQueryParams}>update query params</button>
    </div>

  )

}

希望这对您有帮助。 👍