);\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","directory_shortid":"B6Bkn","id":"7188b4f4-3b19-4b25-9862-3b9e5a4e9fe7","inserted_at":"2021-08-16T16:13:14","is_binary":false,"sha":null,"shortid":"7zjnQ","source_id":"32e47f50-ac83-4e57-a1d1-3c7dc68e8fd5","title":"Routes.js","updated_at":"2021-08-28T08:53:40","upload_id":null}],"forked_from_sandbox":{"alias":"react-router-article-part-1-07zkb","custom_template":null,"git":null,"id":"07zkb","inserted_at":"2021-08-09T18:39:24","privacy":0,"template":"create-react-app","title":"react-router article: part 1","updated_at":"2021-09-15T18:51:38"},"original_git":null,"npm_registries":[],"picks":[],"git":null,"forked_template_sandbox":{"alias":"react-new","custom_template":{"color":"#61DAFB","icon_url":"ReactIcon","id":"40a43fae-72d3-4d3b-8b53-6c795fdd1be3","official":false,"published":true,"title":"React","url":null},"git":null,"id":"new","inserted_at":"2017-04-01T14:30:32","privacy":0,"template":"create-react-app","title":"React","updated_at":"2021-11-23T15:07:58"},"preview_secret":null,"screenshot_url":"https:\u002F\u002Fscreenshots.codesandbox.io\u002Fwzeog\u002F46.png","directories":[{"directory_shortid":null,"id":"4c1c17ef-7e55-4677-854c-b714b034f4d2","inserted_at":"2021-08-16T16:13:14","shortid":"GXOoy","source_id":"32e47f50-ac83-4e57-a1d1-3c7dc68e8fd5","title":"src","updated_at":"2018-02-07T14:00:49"},{"directory_shortid":null,"id":"46143d71-d40e-4a3f-8ae9-cc59aa02302f","inserted_at":"2021-08-16T16:13:14","shortid":"rgkK4","source_id":"32e47f50-ac83-4e57-a1d1-3c7dc68e8fd5","title":"public","updated_at":"2018-02-07T14:04:34"},{"directory_shortid":null,"id":"c9d6fe55-8e71-4ed7-b47e-dc9efa02ddf8","inserted_at":"2021-08-16T16:13:14","shortid":"ByFfouYYD","source_id":"32e47f50-ac83-4e57-a1d1-3c7dc68e8fd5","title":".codesandbox","updated_at":"2020-11-11T14:54:16"},{"directory_shortid":"GXOoy","id":"5aac69bc-301a-4a03-a7ca-27089030a4f3","inserted_at":"2021-08-16T16:13:14","shortid":"B6Bkn","source_id":"32e47f50-ac83-4e57-a1d1-3c7dc68e8fd5","title":"lib","updated_at":"2021-08-04T18:08:28"},{"directory_shortid":"GXOoy","id":"94d6de0c-63b6-4a2d-b956-59c47e1bd1d1","inserted_at":"2021-08-16T16:13:14","shortid":"2ryXW","source_id":"32e47f50-ac83-4e57-a1d1-3c7dc68e8fd5","title":"components","updated_at":"2021-08-09T20:22:36"},{"directory_shortid":"k6nm5","id":"e98d162b-c331-49ae-9db3-7c9a464c5124","inserted_at":"2021-08-16T16:13:14","shortid":"jknpz","source_id":"32e47f50-ac83-4e57-a1d1-3c7dc68e8fd5","title":"page","updated_at":"2021-08-14T16:57:06"},{"directory_shortid":"GXOoy","id":"f433dbfd-728b-41f6-afe6-30cca9747f27","inserted_at":"2021-08-16T16:13:14","shortid":"k6nm5","source_id":"32e47f50-ac83-4e57-a1d1-3c7dc68e8fd5","title":"home","updated_at":"2021-08-14T16:57:02"},{"directory_shortid":"m7MVn","id":"2a2fc4a8-f364-4a30-b959-01172d7e4c21","inserted_at":"2021-08-16T16:13:14","shortid":"XLpWv","source_id":"32e47f50-ac83-4e57-a1d1-3c7dc68e8fd5","title":"page","updated_at":"2021-08-14T16:55:20"},{"directory_shortid":"lRPW6","id":"f9b5b892-87c4-4dca-9b68-9502ec929f6f","inserted_at":"2021-08-16T16:13:14","shortid":"469k7","source_id":"32e47f50-ac83-4e57-a1d1-3c7dc68e8fd5","title":"page","updated_at":"2021-08-14T16:57:49"},{"directory_shortid":"GXOoy","id":"eb4dc4f4-9fb9-42bb-b7e9-42985b95b850","inserted_at":"2021-08-16T16:13:14","shortid":"m7MVn","source_id":"32e47f50-ac83-4e57-a1d1-3c7dc68e8fd5","title":"hobby","updated_at":"2021-08-14T16:55:17"},{"directory_shortid":"GXOoy","id":"bd341c47-d6fe-4397-8f94-b50b3d2d3c06","inserted_at":"2021-08-16T16:13:14","shortid":"lRPW6","source_id":"32e47f50-ac83-4e57-a1d1-3c7dc68e8fd5","title":"about","updated_at":"2021-08-14T16:57:45"}],"tags":[],"base_git":null,"author":{"avatar_url":"https:\u002F\u002Favatars0.githubusercontent.com\u002Fu\u002F17161484?v=4","id":"868fcfdc-6476-4f1e-8881-c5682a50989a","name":"Romain Trotard","personal_workspace_id":"843cda3c-0dab-4e5a-b1c9-b9e1fdc81a99","subscription_plan":null,"subscription_since":null,"username":"romain-trotard"},"privacy":0,"version":46,"permissions":{"prevent_sandbox_export":false,"prevent_sandbox_leaving":false},"team":{"avatar_url":"https:\u002F\u002Favatars0.githubusercontent.com\u002Fu\u002F17161484?v=4","id":"1fbb9210-8968-4727-8fc1-34be862e2798","name":"react-router"}};