web-dev-qa-db-ja.com

useParams（）フックを使用して複数のURLパラメーターを取得する

React-Router 5.1と機能コンポーネントのuseParamsフックを使用して、URLで複数のパラメーターを渡そうとしています。

しかし、私は本当に奇妙な行動に出会います。

クライアントにURLを貼り付けます。

URL：

 http://localhost:3000/onboarding/eventId=5e9a173f9166f800128c04d1&groupId=5e9a173f9166f800128c04dc&userId=5e9a173f9166f800128c04da

道：

<Route path = '/onboarding/:eventId?/:groupId?/:userId?' exact component = {OnboardingViewController} />

奇妙なこと＃1：paramsをオプションにする必要があります。そうしないと、ブラウザーが永久にハングします。

私はこれらすべての戦略を使用してそれらを釣り出します：

    var   {  eventId, groupId, userId } = useParams();
    var   {  eventId } = useParams();
    var   {  groupId } = useParams();
    var   {  userId  } = useParams();

奇妙なこと＃2：残念ながら、これらのパラメーターを使用しようとすると、次のようになります。

{userId: undefined, eventId: "eventId=5e9a173f9166f800128c04d1&groupId=5e9a173f9166f800128c04dc&userId=5e9a173f9166f800128c04da", groupId: undefined}

フックは最初のパラメーターを受け取り、残りの部分を最初に解釈します。

奇妙なこと＃3：ページの読み込みにアクセスするこのurl paramsクエリを追加するのは非常に遅いため、数秒かかります。

私は何を見ていません、間違っていますか？

回答：

私が間違っていたこと：url/eventId = 123を使用していました。これは間違っています。 URL url/1/2/3の適切な場所にリソースを提供する必要があるだけです。

正しい：

http://localhost:3000/onboarding/5e9aaf4fc27583001190834e/5e9aaf60c275830011908361/5e9aaf4fc275830011908357

次に、これらのことをeventId＆groupId＆userIdと呼ぶことをルーターに伝えます。

 <Route path = '/onboarding/:eventId/:groupId/:userId' exact component = {OnboardingViewController} />

次に、userPrams（）フックを使用してコンポーネントでこれらにアクセスできます。

var  { eventId,  groupId, userId } = useParams();

みんな、ありがとう！

reactjsreact-routerreact-hooksurl-parametersreact-functional-component
2
Arne Oldenhave

ルート構造とルートが一致しません

URLでパラメータを使用する場合はhttp://localhost:3000/onboarding/5e9a173f9166f800128c04d1/5e9a173f9166f800128c04dc/5e9a173f9166f800128c04da

そしてあなたのルートコンポーネントは次のようになります：

<Route path = '/onboarding/:eventId/:groupId/:userId' exact component = {OnboardingViewController} />

そして、これをOnboardingViewControllercomponentで使用できます：

 var   {  eventId, groupId, userId } = useParams();
 console.log(eventId,groupId,userId)
0
Adrian Naranjo