{"componentChunkName":"component---node-modules-rocketseat-gatsby-theme-docs-core-src-templates-docs-query-js","path":"/react-js/router","result":{"data":{"mdx":{"id":"712ca1c6-915b-5524-9c69-99ad34817f90","excerpt":"REACT ROUTER Introduction react-router-dom also called react router, is a third-party library used in web applications built with React. It provides a robust…","fields":{"slug":"/react-js/router/"},"frontmatter":{"title":"React Router","description":"Routing | React | RefugeesCode | React Router | React Routing","image":null,"disableTableOfContents":null},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n \"title\": \"React Router\",\n \"description\": \"Routing | React | RefugeesCode | React Router | React Routing\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", {\n \"id\": \"react-router\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#react-router\",\n \"aria-label\": \"react router permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"REACT ROUTER\"), mdx(\"h2\", {\n \"id\": \"introduction\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#introduction\",\n \"aria-label\": \"introduction permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Introduction\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"react-router-dom\"), \" also called react router, is a third-party library used in web applications built with React. It provides a robust solution for handling routing in your applications.\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Routing\"), \" is the ability to move between different parts of an application when a user enters a URL or clicks an element (like a link) within the application.\"), mdx(\"p\", null, \"Since React is Single Page Application we will need to render different components depending on the current route to simulate the navigation.\"), mdx(\"h2\", {\n \"id\": \"goals\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#goals\",\n \"aria-label\": \"goals permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Goals\"), mdx(\"ul\", {\n \"className\": \"contains-task-list\"\n }, mdx(\"li\", {\n parentName: \"ul\",\n \"className\": \"task-list-item\"\n }, mdx(\"input\", {\n parentName: \"li\",\n \"type\": \"checkbox\",\n \"checked\": false,\n \"disabled\": true\n }), \" \", \"Understand React routing\"), mdx(\"li\", {\n parentName: \"ul\",\n \"className\": \"task-list-item\"\n }, mdx(\"input\", {\n parentName: \"li\",\n \"type\": \"checkbox\",\n \"checked\": false,\n \"disabled\": true\n }), \" \", \"Route your React components\"), mdx(\"li\", {\n parentName: \"ul\",\n \"className\": \"task-list-item\"\n }, mdx(\"input\", {\n parentName: \"li\",\n \"type\": \"checkbox\",\n \"checked\": false,\n \"disabled\": true\n }), \" \", \"Create a navigation bar\")), mdx(\"h2\", {\n \"id\": \"basic-tools\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#basic-tools\",\n \"aria-label\": \"basic tools permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Basic tools\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://reactrouter.com/en/main/start/tutorial#adding-a-router\"\n }, \"React router documentation - Adding a router\"), \"\\n\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://blog.logrocket.com/react-router-v6-guide/\"\n }, \"How to use React Router v6 in React apps\")), mdx(\"h2\", {\n \"id\": \"contents\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#contents\",\n \"aria-label\": \"contents permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Contents\"), mdx(\"h3\", {\n \"id\": \"declarative-routing\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#declarative-routing\",\n \"aria-label\": \"declarative routing permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Declarative Routing:\"), mdx(\"p\", null, \"When the URL matches a certain pattern, the corresponding component is rendered. Let's say you have a website with a Home page, About page and Contact page. In declarative routing, you would set up rules like this:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"If the URL is \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"/\"), \", show the Home page.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If the URL is \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"/about\"), \", show the About page.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If the URL is \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"/contact\"), \", show the Contact page.\")), mdx(\"p\", null, \"In code, using \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"react-router-dom\"), \", it would look something like this:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"\\nimport { BrowserRouter as Router, Route } from \\\"react-router-dom\\\";\\nimport Home from \\\"./components/Home\\\";\\nimport About from \\\"./components/About\\\";\\nimport Contact from \\\"./components/Contact\\\"\\n\\n//...other imports here\\n\\n\\nfunction App() {\\n return (\\n \\n } />\\n } />\\n } />\\n \\n);\\n\\n}\\n\\n\")), mdx(\"p\", null, \"In this code, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Home\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"About\"), \", and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Contact\"), \" are React components that render the content for each page. The \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"path\"), \" prop in the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Route\"), \" component is the URL that \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"will trigger the component to be shown\"), \". When the URL in the browser matches the path, the corresponding component is displayed. This is declarative routing.\"), mdx(\"h3\", {\n \"id\": \"dynamic-routing\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#dynamic-routing\",\n \"aria-label\": \"dynamic routing permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Dynamic Routing\"), mdx(\"p\", null, \"It is the ability to define routes that can change based on the application state or user interaction. Let's say you have a blog website where users can click on a blog post to read it. Each blog post has its own unique URL, like \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/post/1\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/post/2\"), \", etc. The number after \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/post/\"), \" is the ID of the blog post.\"), mdx(\"p\", null, \"Instead of defining a route for each blog post manually, as above, you can define a dynamic route that can handle all blog posts:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"\\n} />\\n\\n\")), mdx(\"h3\", {\n \"id\": \"route-parameters\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#route-parameters\",\n \"aria-label\": \"route parameters permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Route Parameters\"), mdx(\"p\", null, \"It allows you to capture \", mdx(\"b\", null, \"dynamic parts of the URL\"), \" as parameters, which can be used to dynamically load data based on the route. If you define the following route:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"\\n} />\\n\\n\")), mdx(\"p\", null, \"In this route, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \":id\"), \" is a placeholder for the ID of the blog post. When a user goes to a URL like \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/post/1\"), \", the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"BlogPost\"), \" component is shown, and it can access the ID (\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"1\"), \" in this case) from the route parameters to load the correct blog post.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"\\nfunction BlogPost({ match }) {\\n const postId = match.params.id;\\n// Now you can use postId to load the correct book from DB4\\n}\\n\\n\")), mdx(\"h3\", {\n \"id\": \"navigation\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#navigation\",\n \"aria-label\": \"navigation permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Navigation\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"react-router-dom\"), \" provides \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" components.\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \": This component is used to create links in your application. It's similar to using an \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" tag in HTML, but it has the advantage of not causing a full page refresh when the link is clicked. Instead, it updates the URL and renders the new component without refreshing the page. Here's an example:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"\\nimport { Link } from \\\"react-router-dom\\\";\\n\\nfunction NavBar() {\\n return (\\n \\n );\\n}\\n\\nexport default NavBar;\\n\\n\")), mdx(\"p\", null, \"In this example, clicking on \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Home\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"About\"), \", or \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Contact\"), \" will change the URL to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/about\"), \", or \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/contact\"), \" respectively\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \": This component is used to automatically redirect from one route to another. It's useful when you want to redirect the user based on some condition. For example, if a user tries to access a page they're not authorized to see, you can redirect them to a login page. Here's an example:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"\\nimport { Redirect } from \\\"react-router-dom\\\";\\n \\nfunction SecretPage({ isLoggedIn }) {\\n if (!isLoggedIn) {\\n return ;\\n }\\n return

Welcome to the secret page!

;\\n}\\n\\n\\nexport default SecretPage;\\n\\n\")), mdx(\"p\", null, \"In this example, if the user is not logged in (\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"isLoggedIn\"), \" is \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"false\"), \"), they are redirected to the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/login\"), \" page. If they are logged in, they see the message \\\"Welcome to the secret page!\\\".\"), mdx(\"p\", null, \"Remember, to use these components, you need to be inside a component that is wrapped with the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" (or \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \") component from \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"react-router-dom\"), \". This is usually done at the top level of your application.\"), mdx(\"h2\", {\n \"id\": \"implementation-of-react-router-dom\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#implementation-of-react-router-dom\",\n \"aria-label\": \"implementation of react router dom permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Implementation of react-router-dom\"), mdx(\"p\", null, \"The command to install react-router-dom as a dependency is\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"\\nnpm i react-router-dom\\n\\n\")), mdx(\"h3\", {\n \"id\": \"wrap-in-browser-router\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#wrap-in-browser-router\",\n \"aria-label\": \"wrap in browser router permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Wrap in Browser Router\"), mdx(\"p\", null, \"Wrap the app childs with the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" component, and then wrap your Route components in the Routes.\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" component is a container for \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" components. It renders the first \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" that matches the current location.\"), mdx(\"p\", null, \"In the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" component the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"path\"), \" prop is used to define the URL path, and the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"element\"), \" prop is used to define the component that should be rendered for that path.\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"react-router-dom\"), \" uses inclusive matching. This means that if you have a Route with a path of \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/\"), \", it will also match \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/about\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/contact\"), \", etc., because they all start with \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/\"), \".\"), mdx(\"p\", null, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"exact\"), \" in \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \"to make sure its component it is only rendered if the URL matches exactly the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"path\"), \". \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://stackoverflow.com/questions/49162311/react-difference-between-route-exact-path-and-route-path\"\n }, \"More on this\")), mdx(\"p\", null, \"The path \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"*\"), \" means any path. Therefore it is very important to place it last one, since \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" will trigger the first route whose \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"path\"), \" matches.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"\\n//Import BrowserRouter, Routes and Route from the library\\n\\nimport { BrowserRouter, Routes, Route } from \\\"react-router-dom\\\";\\nimport Home from \\\"./Home\\\";\\nimport Blogs from \\\"./Blogs\\\";\\nimport Contact from \\\"./Contact\\\";\\nimport NoPage from \\\"./NoPage\\\";\\nimport NavBar from \\\"./NavBar\\\";\\n \\n\\nexport default function App() {\\n\\n return (\\n\\n//Wrap your routes in BrowserRouter component\\n\\n \\n \\n \\n } />\\n } />\\n } />\\n } />\\n \\n \\n);\\n\\n}\\n\\n\")), mdx(\"p\", null, \"Notice that the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" component is out of the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" component, so it will be always rendered regardless of the URL visited.\"), mdx(\"h3\", {\n \"id\": \"set-up-the-navigation-bar\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#set-up-the-navigation-bar\",\n \"aria-label\": \"set up the navigation bar permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Set Up the Navigation Bar\"), mdx(\"p\", null, \"This is an example of a navigation bar for the previous App using the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \"component.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"\\nimport { Link } from \\\"react-router-dom\\\";\\n\\nfunction NavBar() {\\n return (\\n \\n);\\n\\n}\\n\\nexport default NavBar;\\n\\n\")), mdx(\"h2\", {\n \"id\": \"exercise\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#exercise\",\n \"aria-label\": \"exercise permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Exercise\"), mdx(\"ul\", {\n \"className\": \"contains-task-list\"\n }, mdx(\"li\", {\n parentName: \"ul\",\n \"className\": \"task-list-item\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"input\", {\n parentName: \"p\",\n \"type\": \"checkbox\",\n \"checked\": false,\n \"disabled\": true\n }), \" \", \"Create a new react app with \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"create-react-app\"))), mdx(\"li\", {\n parentName: \"ul\",\n \"className\": \"task-list-item\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"input\", {\n parentName: \"p\",\n \"type\": \"checkbox\",\n \"checked\": false,\n \"disabled\": true\n }), \" \", \"Create components: Header, Main Footer, Home, Contact, About, Product and NotFound and import them in the App component.\")), mdx(\"li\", {\n parentName: \"ul\",\n \"className\": \"task-list-item\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"input\", {\n parentName: \"p\",\n \"type\": \"checkbox\",\n \"checked\": false,\n \"disabled\": true\n }), \" \", \"Install React Router\")), mdx(\"li\", {\n parentName: \"ul\",\n \"className\": \"task-list-item\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"input\", {\n parentName: \"p\",\n \"type\": \"checkbox\",\n \"checked\": false,\n \"disabled\": true\n }), \" \", \"Create the following routes for your components\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/\"), \" renders Home component\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/contact\"), \" -> renders Contact component\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/about\"), \" -> renders About component\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/products/:id\"), \" -> renders Product component\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"Any other url will render NotFound\")), mdx(\"li\", {\n parentName: \"ul\",\n \"className\": \"task-list-item\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"input\", {\n parentName: \"p\",\n \"type\": \"checkbox\",\n \"checked\": false,\n \"disabled\": true\n }), \" \", \"Create a navigation bar with links to Home, Contact, About and Product\")), mdx(\"li\", {\n parentName: \"ul\",\n \"className\": \"task-list-item\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"input\", {\n parentName: \"p\",\n \"type\": \"checkbox\",\n \"checked\": false,\n \"disabled\": true\n }), \" \", \"Header, Main and Footer are always rendered regardless of the URL visited\"))));\n}\n;\nMDXContent.isMDXComponent = true;","headings":[{"depth":1,"value":"REACT ROUTER"},{"depth":2,"value":"Introduction"},{"depth":2,"value":"Goals"},{"depth":2,"value":"Basic tools"},{"depth":2,"value":"Contents"},{"depth":3,"value":"Declarative Routing:"},{"depth":3,"value":"Dynamic Routing"},{"depth":3,"value":"Route Parameters"},{"depth":3,"value":"Navigation"},{"depth":2,"value":"Implementation of react-router-dom"},{"depth":3,"value":"Wrap in Browser Router"},{"depth":3,"value":"Set Up the Navigation Bar"},{"depth":2,"value":"Exercise"}]}},"pageContext":{"slug":"/react-js/router/","prev":{"label":"Events & forms","link":"/react-js/events-forms"},"next":{"label":"API calls","link":"/react-js/apiCalls"},"repositoryEditUrl":"https://github.com/rocketseat/gatsby-themes/tree/main/examples/gatsby-theme-docs/src/docs/react-js/router.mdx","repositoryProvider":"GitHub"}},"staticQueryHashes":["1954253342","2328931024","2501019404","973074209"]}