);\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":"7188b4f4-3b19-4b25-9862-3b9e5a4e9fe7","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":"32e47f50-ac83-4e57-a1d1-3c7dc68e8fd5","directory_shortid":"B6Bkn"}],"custom_template":null,"authorization":"read","original_git_commit_sha":null,"git":null,"npm_registries":[],"ai_consent":false,"settings":{"ai_consent":null},"collection":false,"owned":false,"is_sse":false,"v2":false,"forked_template":{"id":"40a43fae-72d3-4d3b-8b53-6c795fdd1be3","title":"React","color":"#61DAFB","v2":false,"url":null,"published":false,"icon_url":"ReactIcon","official":false},"alias":"react-router-implem-part-2-wzeog","room_id":null,"npm_dependencies":{"react":"16.0.0","react-dom":"16.0.0"},"view_count":26456,"inserted_at":"2021-08-16T16:13:14","updated_at":"2021-08-28T08:54:42","always_on":false,"picks":[],"preview_secret":null,"feature_flags":{"comments":false,"container_lsp":false},"tags":[],"forked_from_sandbox":{"alias":"react-router-article-part-1-07zkb","id":"07zkb","title":"react-router article: part 1","template":"create-react-app","inserted_at":"2021-08-09T18:39:24","updated_at":"2021-09-15T18:51:38","git":null,"privacy":0,"custom_template":null},"id":"wzeog","free_plan_editing_restricted":false,"title":"react-router implem: part 2","template":"create-react-app","screenshot_url":"https:\u002F\u002Fscreenshots.codesandbox.io\u002Fwzeog\u002F46.png","is_frozen":false,"author":{"id":"868fcfdc-6476-4f1e-8881-c5682a50989a","name":"Romain Trotard","username":"romain-trotard","avatar_url":"https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F17161484?v=4","personal_workspace_id":"843cda3c-0dab-4e5a-b1c9-b9e1fdc81a99","subscription_plan":null,"subscription_since":null},"user_liked":false};