{"id":28757,"date":"2024-04-02T04:50:03","date_gmt":"2024-04-02T03:50:03","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/creando-tu-primera-single-page-application-con-react-router\/"},"modified":"2024-06-03T18:44:08","modified_gmt":"2024-06-03T17:44:08","slug":"creando-tu-primera-single-page-application-con-react-router","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/creating-your-first-single-page-application-with-react-router\/","title":{"rendered":"Creating Your First Single Page Application with React Router"},"content":{"rendered":"<p>Have you ever wanted to build a web application that is efficient, fast, and with virtually instant page changes? In today&#039;s digital age, user experience is essential, and one of the best ways to improve this experience is through a Single Page Application (SPA) using React Router. In this article, I will guide you step by step through the process of implementing an SPA with React Router, from the basics to some advanced tricks to optimize your application.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/creating-your-first-single-page-application-with-react-router\/#%C2%BFQue_es_una_Single_Page_Application\" >What is a Single Page Application?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/creating-your-first-single-page-application-with-react-router\/#Introduccion_a_React_Router\" >Introduction to React Router<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/creating-your-first-single-page-application-with-react-router\/#Paso_1_Configura_tu_Entorno_de_Desarrollo\" >Step 1: Set up your Development Environment<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/creating-your-first-single-page-application-with-react-router\/#Paso_2_Configurando_el_Router\" >Step 2: Configuring the Router<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/creating-your-first-single-page-application-with-react-router\/#Paso_3_Enlaces_y_Navegacion\" >Step 3: Links and Navigation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/creating-your-first-single-page-application-with-react-router\/#Paso_4_Manejo_de_Rutas_No_Encontradas\" >Step 4: Handling Routes Not Found<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/creating-your-first-single-page-application-with-react-router\/#Mejores_Practicas_y_Consejos_Finales\" >Best Practices and Final Tips<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_una_Single_Page_Application\"><\/span>What is a Single Page Application?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A Single Page Application is a web application that interacts with the user by dynamically rewriting the current page, rather than loading entire web pages from the server. This means that once the initial content of the application is loaded, only the necessary data is downloaded or parts of the page are updated in response to the user&#039;s actions. This reduces loading times, improves the user experience, and decreases the amount of data transferred between client and server.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Introduccion_a_React_Router\"><\/span>Introduction to React Router<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>React Router is a complete library for routing in React applications. It allows you to implement dynamic routing in a web application in a simple and efficient way. It serves as a map to decide which components to display based on the URL visited in the browser.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Paso_1_Configura_tu_Entorno_de_Desarrollo\"><\/span>Step 1: Set up your Development Environment<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To get started with our SPA using React Router, you need to have Node.js and npm (Node Package Manager) installed on your computer. If you need instructions on how to do this, you can visit this <a href=\"https:\/\/nodejs.org\/\" rel=\"nofollow noopener\" target=\"_blank\">link to official documentation<\/a>.<\/p>\n<ol>\n<li>\n<p><strong>Create a new project in React:<\/strong><\/p>\n<pre><code class=\"&quot;language-bash&quot;\">npx create-react-app mi-spa-react cd mi-spa-react<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>Install React Router:<\/strong><br \/>\nTo use React Router, you need to install it:<\/p>\n<pre><code class=\"&quot;language-bash&quot;\">npm install react-router-dom@6<\/code><\/pre>\n<p>This will install React Router version 6, which is the latest at the time of writing.<\/p>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Paso_2_Configurando_el_Router\"><\/span>Step 2: Configuring the Router<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>First, set up the basics for router usage in your React app:<\/p>\n<ol>\n<li>\n<p><strong>Wrap the application in a Router:<\/strong><br \/>\nTo begin with, it matters <code>BrowserRouter<\/code> of <code>react-router-dom<\/code> and wrap your main component (<code>App.js<\/code>) in it. This allows your application to use the capabilities of React Router.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">import { BrowserRouter as Router } from &amp;#039;react-router-dom&amp;#039;; function App() { return (\n   &lt;router&gt;\n     &lt;div&gt;\n       {\/* Components of your app *\/}\n     &lt;\/div&gt;\n   &lt;\/router&gt;\n ); } export default App;<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>Set up your routes:<\/strong><br \/>\nInside the component <code>Router<\/code>, you can start defining the individual routes using the component <code>Route<\/code> which is also imported from <code>react-router-dom<\/code>.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">import {Route, Routes} from &#039;react-router-dom&#039;; import Home from &#039;.\/components\/Home&#039;; import About from &#039;.\/components\/About&#039;; function App() { return ( &lt;Route path=&quot;\/&quot; element={ } \/&gt; &lt;Route path=&quot;about&quot; element={ } \/&gt; ); }<\/code><\/pre>\n<p>In this example, you have two routes: one that loads the component <code>home<\/code> when the root is visited (<code>\/<\/code>) and another that loads the component <code>About<\/code> when you visit <code>\/about<\/code>.<\/p>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Paso_3_Enlaces_y_Navegacion\"><\/span>Step 3: Links and Navigation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In a SPA, moving between pages should be fluid and without reloading the entire page. React Router offers the component <code>Link<\/code> To enable navigation between components without reloading:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">import { Link } from &#039;react-router-dom&#039;; const Navigation = () =&gt; (<nav> home About<\/nav> ); export defaultNavigation;<\/code><\/pre>\n<p>This <code>Navigation<\/code> It can be included in the main component or in any other component that requires navigation links.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Paso_4_Manejo_de_Rutas_No_Encontradas\"><\/span>Step 4: Handling Routes Not Found<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>It is common for users to try to access routes that do not exist in your application. To handle these cases, React Router provides a simple approach using <code>&lt;Route path=&quot;*&quot; element={ } \/&gt;<\/code>:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">&lt;Route path=&quot;\/&quot; element={ } \/&gt; &lt;Route path=&quot;\/about&quot; element={ } \/&gt; &lt;Route path=&quot;*&quot; element={ } \/&gt;<\/code><\/pre>\n<p>The component <code>NotFound<\/code> will be displayed whenever an attempt is made to access an undefined route.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Mejores_Practicas_y_Consejos_Finales\"><\/span>Best Practices and Final Tips<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>\n<p><strong>Optimizing performance with lazy loading:<\/strong><br \/>\nReact allows for lazy loading of components, which is an excellent practice to improve the initial loading time of your SPA. Using <code>React.lazy()<\/code> y <code>Suspense<\/code>, you can load components only when they are needed.<\/p>\n<\/li>\n<li>\n<p><strong>Use Hooks for cleaner code:<\/strong><br \/>\nReact Router v6 introduces several useful hooks like <code>useNavigate<\/code> o <code>useParams<\/code>, which can make your code cleaner and easier to maintain.<\/p>\n<\/li>\n<li>\n<p><strong>Unit tests:<\/strong><br \/>\nAlways test your routes and components. The bookstore <code>React Testing Library<\/code> It is an excellent option for testing React applications, including those that use React Router.<\/p>\n<\/li>\n<\/ol>\n<p>To conclude, React Router offers a robust and efficient way to handle routing in React applications. By following this tutorial, you should be able to implement and improve your SPA to provide a great user experience. If you have questions, feel free to contact me via <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">my contact page<\/a>. Happy coding!<\/p>","protected":false},"excerpt":{"rendered":"<p>Have you ever wanted to build a web application that is efficient, fast, and with almost instantaneous page changes? In today\u2019s digital age, user experience is paramount, and one of the best ways to improve this experience is through a Single Page Application (SPA) using React Router. In this article, we\u2019ll cover how to build a web application that is efficient, fast, and with virtually instantaneous page changes.<\/p>","protected":false},"author":1,"featured_media":28758,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,2207,1901],"tags":[1929,205,90,652,2208,1527,1930,627,1008,234,1931,1526],"class_list":["post-28757","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-nodejs","category-pruebas-de-proyecto","tag-application","tag-blog","tag-con","tag-creando","tag-nodejs","tag-page","tag-primera","tag-proyecto","tag-pruebas","tag-react","tag-router","tag-single"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28757","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=28757"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28757\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/28758"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=28757"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=28757"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=28757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}