@yosaku_ibsposted at 2022-11-22

なぜidの前にコロンが付くのかわかりません。

Q&A

Closed

ソースコードのpathにご注目頂きたいのですが、
なぜidの前にコロンが付いているのでしょうか？
（このコロンにはどんな役目があるのでしょうか？）

Editor.js


    <Route path=':id' element={<Event events={events} onDelete={deleteEvent} />} />

ネットで検索しましたが、解説されている記事にたどり着けず、解決できずにいます。

以上、お手数ではございますが
もしご存知の方がいらっしゃいましたら
ご教示の程よろしくお願い申し上げます。

1Answer

例えば下記サイトの「下層ページのルート設定」に記載があります。
https://www.webopixel.net/javascript/1773.html

詳細ページURLからパラメータを取得するのでパスには:postIdとコロンをつけてキーワードを指定します。
これで「posts/1」「posts/2」にアクセスしたとき、postIdというパラメータで「1,2」が取れるようになります

1Like

@yosaku_ibs
Questioner
mickey_dev様
お世話になります。
ご回答下さりありがとうございます。
「コロンをつけてキーワードを指定します。」というのは
javascriptの記法なのででしょうか？それともreactの記法なのでしょうか？

ご教示お願いします。
@mickey_dev
このあたり、特に詳しいわけではありませんが
今回のケースについては、React の Router としての記法(仕様)でしょう。
https://reactrouter.com/en/main/start/overview#dynamic-segments
https://reactrouter.com/en/main/start/overview#ranked-route-matching
@yosaku_ibs
Questioner
お世話になっております。

専門外の話題にも関わらず検索してご回答下さり
誠にありがとうございます。
ReactのRouterとしての記法（仕様）と理解しようと思います。
この度はご対応下さり誠にありがとうございました。
厚く御礼申し上げます。