{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/understanding-express-route-and-express-router/",
    "result": {"data":{"markdownRemark":{"html":"<div class=\"table-of-contents\">\n<ul>\n<li><a href=\"#express-route\">Express route</a></li>\n<li><a href=\"#path\">Path</a></li>\n<li><a href=\"#http-verb\">HTTP verb</a></li>\n<li><a href=\"#setting-status-codes\">Setting status codes</a></li>\n<li><a href=\"#route-handling\">Route handling</a></li>\n<li><a href=\"#dynamic-routes--reqparams\">Dynamic routes &#x26; req.params</a></li>\n<li><a href=\"#query-strings\">Query strings</a></li>\n<li><a href=\"#express-router\">Express Router</a></li>\n</ul>\n</div>\n<h3 id=\"express-route\" style=\"position:relative;\"><a href=\"#express-route\" aria-label=\"express route permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" 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\"></path></svg></a>Express route</h3>\n<p>A route is a section of Express code that associates an HTTP verb ( <del>GET</del> , <del>POST</del> , <del>PUT</del> , <del>DELETE</del> , etc.), a URL path/pattern, and a function ( <em>route handler callback</em> ) that is called to handle that pattern.</p>\n<h3 id=\"path\" style=\"position:relative;\"><a href=\"#path\" aria-label=\"path permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" 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\"></path></svg></a>Path</h3>\n<p>The path is the part of a request URL after the hostname and port number, so in a request to <del>localhost:3000/about</del>, the path is <del>/about</del> (<em>in this example, the hostname is <strong>localhost</strong>, the port number is <strong>3000</strong></em>).</p>\n<h3 id=\"http-verb\" style=\"position:relative;\"><a href=\"#http-verb\" aria-label=\"http verb permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" 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\"></path></svg></a>HTTP verb</h3>\n<p>The HTTP verb is always included in the request.</p>\n<ul>\n<li>\n<p><del>GET</del> requests are used for retrieving resources from a server.</p>\n</li>\n<li>\n<p><del>POST</del> is the HTTP method verb used for creating new resources.</p>\n</li>\n<li>\n<p><del>PUT</del> requests are used for updating existing resources.</p>\n</li>\n<li>\n<p><del>DELETE</del> requests are used for deleting existing resources.</p>\n</li>\n</ul>\n<p>Express routes usually take two arguments, <strong>a path</strong> (usually a string), and <strong>a callback function</strong> to handle the request and send a response.</p>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">app</span><span class=\"mtk1\">.</span><span class=\"mtk6\">get</span><span class=\"mtk1\">(</span><span class=\"mtk16\">&quot;/about&quot;</span><span class=\"mtk1\">, () </span><span class=\"mtk10\">=&gt;</span><span class=\"mtk1\"> {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk3\">res</span><span class=\"mtk1\">.</span><span class=\"mtk6\">send</span><span class=\"mtk1\">(</span><span class=\"mtk16\">&quot;Hello from Express&quot;</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">})</span></span></span></code></pre>\n<p>The route above will match any <del>GET</del> request to <del>/about</del> and call the callback function, passing in two objects as the first two arguments.</p>\n<p>These objects represent the request sent to the server and the response that the Express server should eventually send to the client.</p>\n<p>Express servers send responses using the <del>.send()</del> method on the response object. <del>send</del> will take any input and include it in the response body.</p>\n<p>If no routes are matched on a client request, the Express server will handle sending a <strong>404 Not Found</strong> response to the client.</p>\n<h3 id=\"setting-status-codes\" style=\"position:relative;\"><a href=\"#setting-status-codes\" aria-label=\"setting status codes permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" 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\"></path></svg></a>Setting status codes</h3>\n<p>Express allows us to set the status code on responses before they are sent. Response codes provide information to clients about how their requests were handled.</p>\n<p>Until now, we have been allowing the Express server to set status codes for us. For example, any <del>res.send()</del> has by default a <strong>200 OK</strong> status code.</p>\n<p>The <del>res</del> object has a <del>.status()</del> method to allow us to set the status code, and other methods like <del>.send()</del> can be chained from it.</p>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">app</span><span class=\"mtk1\">.</span><span class=\"mtk6\">get</span><span class=\"mtk1\">(</span><span class=\"mtk16\">&quot;/about&quot;</span><span class=\"mtk1\">, () </span><span class=\"mtk10\">=&gt;</span><span class=\"mtk1\"> {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk3\">res</span><span class=\"mtk1\">.</span><span class=\"mtk6\">status</span><span class=\"mtk1\">(</span><span class=\"mtk7\">200</span><span class=\"mtk1\">).</span><span class=\"mtk6\">send</span><span class=\"mtk1\">(</span><span class=\"mtk16\">&quot;Hello from Express&quot;</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">})</span></span></span></code></pre>\n<h3 id=\"route-handling\" style=\"position:relative;\"><a href=\"#route-handling\" aria-label=\"route handling permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" 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\"></path></svg></a>Route handling</h3>\n<p>Express tries to match requests by route, meaning that if we send a request to <del><server address>:<port number>/api-endpoint</del>, the Express server will search through any registered routes in order and try to match <del>/api-endpoint</del>.</p>\n<p>Express searches through routes in the order that they are registered in your code. The first one that is matched will be used, and its callback will be called.</p>\n<p>If there are no matching routes registered, or the Express server has not sent a response at the end of all matched routes, it will automatically send back a <strong>404 Not Found</strong> response, meaning that no routes were matched or no response was ultimately sent by the registered routes.</p>\n<h3 id=\"dynamic-routes--reqparams\" style=\"position:relative;\"><a href=\"#dynamic-routes--reqparams\" aria-label=\"dynamic routes  reqparams permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" 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\"></path></svg></a>Dynamic routes &#x26; req.params</h3>\n<p>We can create dynamic path segments (<em>called parameters</em>) by adding a <del>:</del> to Express router definitions.</p>\n<p>Express parses any parameters, extracts their actual values, and attaches them as an object to the request object: <del>req.params</del>. The name you add after <del>:</del> is the name of the key by which you can extract data from <del>req.params</del>.</p>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">const</span><span class=\"mtk1\"> </span><span class=\"mtk3\">mobiles</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> { </span><span class=\"mtk3\">apple</span><span class=\"mtk14\">:</span><span class=\"mtk1\"> { </span><span class=\"mtk3\">price</span><span class=\"mtk14\">:</span><span class=\"mtk1\"> </span><span class=\"mtk7\">1000</span><span class=\"mtk1\"> }, </span><span class=\"mtk3\">samsung</span><span class=\"mtk14\">:</span><span class=\"mtk1\"> { </span><span class=\"mtk3\">price</span><span class=\"mtk14\">:</span><span class=\"mtk1\"> </span><span class=\"mtk7\">600</span><span class=\"mtk1\"> } }</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk4 mtki\">//GET/mobiles/apple</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"4\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">app</span><span class=\"mtk1\">.</span><span class=\"mtk6\">get</span><span class=\"mtk1\">(</span><span class=\"mtk16\">&quot;/mobiles/:brand&quot;</span><span class=\"mtk1\">, (</span><span class=\"mtk3 mtki\">req</span><span class=\"mtk1\">, </span><span class=\"mtk3 mtki\">res</span><span class=\"mtk1\">, </span><span class=\"mtk3 mtki\">next</span><span class=\"mtk1\">) </span><span class=\"mtk10\">=&gt;</span><span class=\"mtk1\"> {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"5\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk9\">console</span><span class=\"mtk1\">.</span><span class=\"mtk6\">log</span><span class=\"mtk1\">(</span><span class=\"mtk3\">req</span><span class=\"mtk1\">.</span><span class=\"mtk7\">params</span><span class=\"mtk1\">) </span><span class=\"mtk4 mtki\">// =&gt; {brand: &#39;Apple&#39;}</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"6\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk3\">res</span><span class=\"mtk1\">.</span><span class=\"mtk6\">send</span><span class=\"mtk1\">(</span><span class=\"mtk3\">mobiles</span><span class=\"mtk1\">[</span><span class=\"mtk3\">req</span><span class=\"mtk1\">.</span><span class=\"mtk3\">params</span><span class=\"mtk1\">.</span><span class=\"mtk7\">brand</span><span class=\"mtk1\">])</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"7\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">})</span></span></span></code></pre>\n<p>In the code snippet above, a <del>.get()</del> route is defined to match <del>/mobiles/:brand</del> path.</p>\n<p>When a <del>GET</del> request arrives for <del>/mobiles/apple</del>, the callback is called.</p>\n<p>Inside the callback, <del>req.params</del> is an object with the key <del>brand</del> and the value <del>apple</del>, which was present in the actual request path. The appropriate mobile brand is retrieved from the <del>mobiles</del> object and sent back to the client.</p>\n<h3 id=\"query-strings\" style=\"position:relative;\"><a href=\"#query-strings\" aria-label=\"query strings permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" 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\"></path></svg></a>Query strings</h3>\n<p>Query strings appear at the end of the path in URLs, and they are indicated with a <del>?</del> character. For example, in <del>/persons/1?name=Morgan&#x26;age=26</del>, the query string is <del>name=Morgan&#x26;age=26</del> and the path is <del>/persons/1/</del>.</p>\n<p>Query strings do not count as part of the route path. Instead, the Express server parses them into a JavaScript object and attaches it to the request body as the value of <del>req.query</del>.</p>\n<p>The key: value relationship is indicated by the <del>=</del> character in a query string, and key-value pairs are separated by <del>&#x26;</del>.</p>\n<p>In the above example route, the <del>req.query</del> object would be <del>{ name: 'Morgan', age: '26' }</del>.</p>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">const</span><span class=\"mtk1\"> </span><span class=\"mtk3\">persons</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> { </span><span class=\"mtk7\">1</span><span class=\"mtk14\">:</span><span class=\"mtk1\"> { </span><span class=\"mtk3\">name</span><span class=\"mtk14\">:</span><span class=\"mtk1\"> </span><span class=\"mtk16\">&quot;Charles&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk3\">age</span><span class=\"mtk14\">:</span><span class=\"mtk1\"> </span><span class=\"mtk16\">&quot;25&quot;</span><span class=\"mtk1\"> } }</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk4 mtki\">// PUT /persons/1?name=Morgan&amp;age=26</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"4\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">app</span><span class=\"mtk1\">.</span><span class=\"mtk6\">put</span><span class=\"mtk1\">(</span><span class=\"mtk16\">&quot;/persons/:id&quot;</span><span class=\"mtk1\">, (</span><span class=\"mtk3 mtki\">req</span><span class=\"mtk1\">, </span><span class=\"mtk3 mtki\">res</span><span class=\"mtk1\">, </span><span class=\"mtk3 mtki\">next</span><span class=\"mtk1\">) </span><span class=\"mtk10\">=&gt;</span><span class=\"mtk1\"> {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"5\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk10\">const</span><span class=\"mtk1\"> </span><span class=\"mtk3\">personUpdates</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk3\">req</span><span class=\"mtk1\">.</span><span class=\"mtk7\">query</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"6\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk3\">persons</span><span class=\"mtk1\">[</span><span class=\"mtk3\">req</span><span class=\"mtk1\">.</span><span class=\"mtk3\">params</span><span class=\"mtk1\">.</span><span class=\"mtk7\">id</span><span class=\"mtk1\">] </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk3\">personUpdates</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"7\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk3\">res</span><span class=\"mtk1\">.</span><span class=\"mtk6\">send</span><span class=\"mtk1\">(</span><span class=\"mtk3\">persons</span><span class=\"mtk1\">[</span><span class=\"mtk3\">req</span><span class=\"mtk1\">.</span><span class=\"mtk3\">params</span><span class=\"mtk1\">.</span><span class=\"mtk7\">id</span><span class=\"mtk1\">])</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"8\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">})</span></span></span></code></pre>\n<p>Here, we have a route for updating persons by ID. When a <del>PUT</del> <del>/persons/1?name=Morgan&#x26;age=26</del> request arrives, our callback function is called and, we create a <del>personUpdates</del> variable to store <del>req.query</del>. Since <del>req.params.id</del> is '1', we replace persons['1']‘s value with <del>personUpdates</del>. Finally, Express sends back the new persons['1'].</p>\n<p>When updating, many servers will send back the updated resource after the updates are applied so that the client has the exact same version of the resource as the server and database.</p>\n<h3 id=\"express-router\" style=\"position:relative;\"><a href=\"#express-router\" aria-label=\"express router permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" 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\"></path></svg></a>Express Router</h3>\n<p>We use <del>express.Router</del> to create modular, mountable route handlers.</p>\n<p>To create an instance of the Express Router, invoke the <del>.Router</del> method on the top-level Express import. A route instance is a complete middleware and routing system.</p>\n<p>To use a router, we mount it at a certain path using <del>app.use()</del> and pass in the router as the second argument.</p>\n<div class=\"gatsby-code-title\">routes/expressRoutes.js</div>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"4\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">const</span><span class=\"mtk1\"> </span><span class=\"mtk3\">express</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk6\">require</span><span class=\"mtk1\">(</span><span class=\"mtk16\">&quot;express&quot;</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">const</span><span class=\"mtk1\"> </span><span class=\"mtk3\">router</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk3\">express</span><span class=\"mtk1\">.</span><span class=\"mtk6\">Router</span><span class=\"mtk1\">()</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"4\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"5\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">router</span><span class=\"mtk1\">.</span><span class=\"mtk6\">get</span><span class=\"mtk1\">(</span><span class=\"mtk16\">&quot;/&quot;</span><span class=\"mtk1\">, (</span><span class=\"mtk3 mtki\">req</span><span class=\"mtk1\">, </span><span class=\"mtk3 mtki\">res</span><span class=\"mtk1\">, </span><span class=\"mtk3 mtki\">next</span><span class=\"mtk1\">) </span><span class=\"mtk10\">=&gt;</span><span class=\"mtk1\"> {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"6\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk3\">res</span><span class=\"mtk1\">.</span><span class=\"mtk6\">send</span><span class=\"mtk1\">(</span><span class=\"mtk16\">&quot;Hello from Express&quot;</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"7\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">})</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"8\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"9\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">router</span><span class=\"mtk1\">.</span><span class=\"mtk6\">get</span><span class=\"mtk1\">(</span><span class=\"mtk16\">&quot;/about&quot;</span><span class=\"mtk1\">, (</span><span class=\"mtk3 mtki\">req</span><span class=\"mtk1\">, </span><span class=\"mtk3 mtki\">res</span><span class=\"mtk1\">, </span><span class=\"mtk3 mtki\">next</span><span class=\"mtk1\">) </span><span class=\"mtk10\">=&gt;</span><span class=\"mtk1\"> {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"10\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk3\">res</span><span class=\"mtk1\">.</span><span class=\"mtk6\">send</span><span class=\"mtk1\">(</span><span class=\"mtk16\">&quot;Express is a Node.js application framework.&quot;</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"11\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">})</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"12\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"13\"></span><span class=\"grvsc-source\"><span class=\"mtk9\">module</span><span class=\"mtk1\">.</span><span class=\"mtk9\">exports</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk3\">router</span></span></span></code></pre>\n<div class=\"gatsby-code-title\">app.js</div>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"5\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">const</span><span class=\"mtk1\"> </span><span class=\"mtk3\">express</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk6\">require</span><span class=\"mtk1\">(</span><span class=\"mtk16\">&#39;express&#39;</span><span class=\"mtk1\">);</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">const</span><span class=\"mtk1\"> </span><span class=\"mtk3\">expressRoutes</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk6\">require</span><span class=\"mtk1\">(</span><span class=\"mtk16\">&#39;./routes/expressRoutes&#39;</span><span class=\"mtk1\">);</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"4\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"5\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">const</span><span class=\"mtk1\"> </span><span class=\"mtk3\">app</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk6\">express</span><span class=\"mtk1\">();</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"6\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"7\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">app</span><span class=\"mtk1\">.</span><span class=\"mtk6\">use</span><span class=\"mtk1\">(</span><span class=\"mtk3\">expressRoutes</span><span class=\"mtk1\">);</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"8\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"9\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">const</span><span class=\"mtk1\"> </span><span class=\"mtk3\">PORT</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk7\">5000</span><span class=\"mtk1\"> </span><span class=\"mtk10\">||</span><span class=\"mtk1\"> </span><span class=\"mtk3\">process</span><span class=\"mtk1\">.</span><span class=\"mtk3\">env</span><span class=\"mtk1\">.</span><span class=\"mtk7\">PORT</span><span class=\"mtk1\">;</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"10\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"11\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">app</span><span class=\"mtk1\">.</span><span class=\"mtk6\">listen</span><span class=\"mtk1\">(</span><span class=\"mtk7\">5000</span><span class=\"mtk1\">, () </span><span class=\"mtk10\">=&gt;</span><span class=\"mtk1\"> {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"12\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk9\">console</span><span class=\"mtk1\">.</span><span class=\"mtk6\">log</span><span class=\"mtk1\">(</span><span class=\"mtk16\">`The server is listening on port </span><span class=\"mtk8\">${</span><span class=\"mtk3\">PORT</span><span class=\"mtk8\">}</span><span class=\"mtk16\">`</span><span class=\"mtk1\">);</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"13\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">});</span></span></span></code></pre>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    position: relative;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n    line-height: 1.4;\n  }\n  \n  .grvsc-code {\n    display: table;\n  }\n  \n  .grvsc-line {\n    display: table-row;\n    box-sizing: border-box;\n    width: 100%;\n    position: relative;\n  }\n  \n  .grvsc-line > * {\n    position: relative;\n  }\n  \n  .grvsc-gutter-pad {\n    display: table-cell;\n    padding-left: 0.75rem;\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\n  }\n  \n  .grvsc-gutter {\n    display: table-cell;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n  }\n  \n  .grvsc-gutter::before {\n    content: attr(data-content);\n  }\n  \n  .grvsc-source {\n    display: table-cell;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-source:empty::after {\n    content: ' ';\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n  }\n  \n  .grvsc-gutter + .grvsc-source {\n    padding-left: 0.75rem;\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\n  }\n  \n  /* Line transformer styles */\n  \n  .grvsc-has-line-highlighting > .grvsc-code > .grvsc-line::before {\n    content: ' ';\n    position: absolute;\n    width: 100%;\n  }\n  \n  .grvsc-line-diff-add::before {\n    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));\n  }\n  \n  .grvsc-line-diff-del::before {\n    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));\n  }\n  \n  .grvsc-line-number {\n    padding: 0 2px;\n    text-align: right;\n    opacity: 0.7;\n  }\n  \n  .synthwave-84 { background-color: #262335; }\n  .synthwave-84 .mtki { font-style: italic; }\n  .synthwave-84 .mtk3 { color: #FF7EDB; }\n  .synthwave-84 .mtk1 { color: #FFFFFF; }\n  .synthwave-84 .mtk6 { color: #36F9F6; }\n  .synthwave-84 .mtk16 { color: #FF8B39; }\n  .synthwave-84 .mtk10 { color: #FEDE5D; }\n  .synthwave-84 .mtk7 { color: #2EE2FA; }\n  .synthwave-84 .mtk12 { color: #FFFFFFEE; }\n  .synthwave-84 .mtk14 { color: #B6B1B1; }\n  .synthwave-84 .mtk4 { color: #848BBD; }\n  .synthwave-84 .mtk9 { color: #FE4450; }\n  .synthwave-84 .mtk8 { color: #72F1B8; }\n  .synthwave-84 .grvsc-line-highlighted::before {\n    background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\n  }\n</style>","frontmatter":{"title":"Understanding Express Route & Express Router","date":"2021-05-21"}}},"pageContext":{"slug":"/understanding-express-route-and-express-router/","prev":{"fields":{"slug":"/understanding-express-middleware/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/understanding-node-modules-in-node/"},"frontmatter":{"modules":null}}}},
    "staticQueryHashes": ["3159585216"]}