);\n\n const matches = currentPathname.match(matcher);\n\n \u002F\u002F The route doesn't match\n \u002F\u002F Let's end this\n if (!matches) {\n return null;\n }\n\n \u002F\u002F First value is the corresponding value: currentPathname\n const matchValues = matches.slice(1);\n\n return pathParams.reduce(\n (acc, paramName, index) =\u003E {\n acc.params[paramName] = matchValues[index];\n return acc;\n },\n {\n params: {},\n element: route.element,\n \u002F\u002F We want the real path\n \u002F\u002F and not the one with path variables (ex :name)\n path: matches[0]\n }\n );\n}\n\nconst RouteContext = React.createContext({ params: {}, path: \"\" });\n\nexport const useRouteContext = () =\u003E useContext(RouteContext);\n\nexport const useParams = () =\u003E useRouteContext().params;\n\nexport default function Routes({ children }) {\n \u002F\u002F Get the current pathname\n const { pathname: currentPathname } = useLocation();\n \u002F\u002F Construct an Array of object corresponding to available Route elements\n const routeElements = buildRouteElementsFromChildren(children);\n\n \u002F\u002F We want to normalize the pahts\n \u002F\u002F They need to start by a \"\u002F\"\"\n normalizePathOfRouteElements(routeElements);\n\n \u002F\u002F A Routes component can only have one matching Route\n const matchingRoute = findFirstMatchingRoute(routeElements, currentPathname);\n\n \u002F\u002F No matching, let's show nothing\n if (!matchingRoute) {\n return null;\n }\n\n const { params, element, path } = matchingRoute;\n\n return (\n \u003CRouteContext.Provider\n value={{\n params,\n path\n }}\n \u003E\n {element}\n \u003C\u002FRouteContext.Provider\u003E\n );\n}\n","id":"mod_F299dNi2QJ4a5XGdNqZs26","is_binary":false,"title":"Routes.js","sha":null,"inserted_at":"2021-08-16T16:13:14","updated_at":"2021-08-28T08:53:40","upload_id":null,"shortid":"7zjnQ","source_id":"src_7HVpwoLeU8cJKn71g5Md16","directory_shortid":"B6Bkn"}],"custom_template":null,"team":{"id":"ws_4vGoBXjyRieyfjVZLrv2hm","name":"react-router","settings":{"ai_consent":{"public_sandboxes":false,"private_sandboxes":false}},"subscription_type":null,"avatar_url":null},"author":{"id":"user_Hck6p6m3yFXRCNu4fmLTSH","name":"Romain Trotard","username":"romain-trotard","avatar_url":"https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F17161484?v=4","personal_workspace_id":"ws_HL6gchWTGZas2nUL51SZeG","subscription_plan":null,"subscription_since":null},"git":null,"npm_dependencies":{"react":"16.0.0","react-dom":"16.0.0"},"v2":false,"forked_template_sandbox":{"alias":"react-new","id":"new","title":"React","template":"create-react-app","inserted_at":"2017-04-01T14:30:32","updated_at":"2024-12-06T15:10:09","git":null,"privacy":0,"sdk":false,"custom_template":{"id":"sbtempl_8yyBu41wTTFik8Akr9VegS","title":"React","v2":false,"color":"#61DAFB","url":null,"published":false,"sdk":false,"icon_url":"ReactIcon","official":false}},"forked_template":{"id":"sbtempl_8yyBu41wTTFik8Akr9VegS","title":"React","v2":false,"color":"#61DAFB","url":null,"published":false,"sdk":false,"icon_url":"ReactIcon","official":false},"feature_flags":{"comments":false,"container_lsp":false},"settings":{"ai_consent":null,"use_pint":false},"is_frozen":false,"npm_registries":[],"original_git":null,"updated_at":"2021-08-28T08:54:42","like_count":0,"entry":"src\u002Findex.js","description":null,"restricted":false,"collection":false,"directories":[{"id":"dir_AQ74szH48DidVpBfRnKnV7","title":"src","inserted_at":"2021-08-16T16:13:14","updated_at":"2018-02-07T14:00:49","shortid":"GXOoy","source_id":"src_7HVpwoLeU8cJKn71g5Md16","directory_shortid":null},{"id":"dir_9euvBizYrW2QRCQgjPPzJ2","title":"public","inserted_at":"2021-08-16T16:13:14","updated_at":"2018-02-07T14:04:34","shortid":"rgkK4","source_id":"src_7HVpwoLeU8cJKn71g5Md16","directory_shortid":null},{"id":"dir_RvbUYBvVxp4WLq1ZFzTi95","title":".codesandbox","inserted_at":"2021-08-16T16:13:14","updated_at":"2020-11-11T14:54:16","shortid":"ByFfouYYD","source_id":"src_7HVpwoLeU8cJKn71g5Md16","directory_shortid":null},{"id":"dir_CCQs5EVQyioTgxqYG2bZXg","title":"lib","inserted_at":"2021-08-16T16:13:14","updated_at":"2021-08-04T18:08:28","shortid":"B6Bkn","source_id":"src_7HVpwoLeU8cJKn71g5Md16","directory_shortid":"GXOoy"},{"id":"dir_KP11oi569uasJQMfbZyhjn","title":"components","inserted_at":"2021-08-16T16:13:14","updated_at":"2021-08-09T20:22:36","shortid":"2ryXW","source_id":"src_7HVpwoLeU8cJKn71g5Md16","directory_shortid":"GXOoy"},{"id":"dir_VqiPDLMyuUYqzoizf2kKnb","title":"page","inserted_at":"2021-08-16T16:13:14","updated_at":"2021-08-14T16:57:06","shortid":"jknpz","source_id":"src_7HVpwoLeU8cJKn71g5Md16","directory_shortid":"k6nm5"},{"id":"dir_XA11Xbyw3KDJLNdmsM1gvi","title":"home","inserted_at":"2021-08-16T16:13:14","updated_at":"2021-08-14T16:57:02","shortid":"k6nm5","source_id":"src_7HVpwoLeU8cJKn71g5Md16","directory_shortid":"GXOoy"},{"id":"dir_6D9Mf6yNk3gEtUgots1g8G","title":"page","inserted_at":"2021-08-16T16:13:14","updated_at":"2021-08-14T16:55:20","shortid":"XLpWv","source_id":"src_7HVpwoLeU8cJKn71g5Md16","directory_shortid":"m7MVn"},{"id":"dir_XqSjg6npENvTkAJVGaneKp","title":"page","inserted_at":"2021-08-16T16:13:14","updated_at":"2021-08-14T16:57:49","shortid":"469k7","source_id":"src_7HVpwoLeU8cJKn71g5Md16","directory_shortid":"lRPW6"},{"id":"dir_W4GSgGyFBwQpgFwdfE3ppo","title":"hobby","inserted_at":"2021-08-16T16:13:14","updated_at":"2021-08-14T16:55:17","shortid":"m7MVn","source_id":"src_7HVpwoLeU8cJKn71g5Md16","directory_shortid":"GXOoy"},{"id":"dir_QN6Mn4MH2oKgSrYdJJ2PRf","title":"about","inserted_at":"2021-08-16T16:13:14","updated_at":"2021-08-14T16:57:45","shortid":"lRPW6","source_id":"src_7HVpwoLeU8cJKn71g5Md16","directory_shortid":"GXOoy"}],"alias":"react-router-implem-part-2-wzeog","preview_secret":null,"pr_number":null,"inserted_at":"2021-08-16T16:13:14","sdk":false,"is_sse":false,"title":"react-router implem: part 2","restrictions":{"free_plan_editing_restricted":false,"live_sessions_restricted":true},"base_git":null,"authorization":"read","screenshot_url":"https:\u002F\u002Fscreenshots.codesandbox.io\u002Fwzeog\u002F46.png","tags":[],"user_liked":false,"version":46,"room_id":null,"external_resources":[],"picks":[],"ai_consent":false,"id":"wzeog","fork_count":10,"view_count":27185,"free_plan_editing_restricted":false,"always_on":false,"original_git_commit_sha":null,"owned":false,"permissions":{"prevent_sandbox_export":false,"prevent_sandbox_leaving":false},"template":"create-react-app"};