Express.js | Utilizing express.Router and handling route parameter inputs

I'm currently facing an issue with a small program I'm developing to practice Express.js.

The problem lies in a separate router that is supposed to send a specific response based on the route. For example, when navigating to "/santiago", it should display "Hi Santiago", but instead, it shows "Hi undefined". This is the code for the router named name.js:

//name.js
const express = require('express');
const router = express.Router();

router.get('/', (req,res) => {
    res.send("Hi " + req.params.name);
});

module.exports = router;

And here's the code for app.js:

//app.js
const express = require('express');
const app = express();
let port = process.env.PORT || 3000;
app.listen(port);

const name = require('./name');

app.use('/:name', name);

app.get('/', (req,res) => {
    res.send("Welcome");
});

Can you spot the mistake?

Answer №1

Your router is not receiving the required parameter. Ensure the parameter is set in your name.js (router):

router.get('/:name', (req,res)=>{
    res.send("Hi " + req.params.name); 
});

Also, make sure to update your root route in server.js:

app.use('/', name);

In essence, your router will be accessed from the root but expects a specific parameter.

This solution should resolve the issue and still display 'Welcome' at the root. This is because the router requires a parameter, so if none is provided, the last app.get method will execute.

I hope this explanation helps!

Answer №2

In order to correctly indicate the parameter in the route, consider using the following approach:

app.get('/:username', (req,res) => {
    const { username } = req.params
    res.send("Hello " + username)
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Trouble displaying specific events based on their IDs retrieved from the MySQL database

Each button in my list is associated with a specific person. Upon clicking a button, it directs to calendar.php?id=5 (where 5 is the personal id). I want the calendar to display the vacations scheduled for that particular id from the MySQL database. even ...

What are the methods to alter validation for a Formfield based on the input from other Formfields?

My aim is to create a Form where input fields are required only if one or more of them are filled out. If none of the fields have been filled, then no field should be mandatory. I came across a suggestion on a website that recommended using "valueChanges" ...

Managing JSON data retrieval and manipulation techniques

My code is set up to display the image, title, and summary for all entries in a JSON file. However, I only want to display the image, title, and summary for the first entry, and only show the title for the rest of the entries. Please advise. <html> ...

Interested in learning how to redirect to a different page using vanilla JavaScript after submitting an HTML form with a Django backend?

Recently delving into Django, I encountered a challenge of linking a js file to my HTML form page and saving the form data before moving on to the next screen. My aim was to incorporate a feature where users can click a picture and POST it along with their ...

AngularJS $routeProvider is experiencing difficulties with its routing functionality

I am a beginner with Angular and I'm trying to understand how multiple routes can lead to the same view/templateUrl and controller. This is what I have written: angular .module('mwsApp', [ 'ngAnimate', 'ngCookies&ap ...

What is the best way to dynamically adjust the size of a grid of divs to perfectly fit within the boundaries of a container div without surpassing them?

Currently, I am working on a project for "The Odin Project" that involves creating a web page similar to an etch-a-sketch. I have made some progress, but I am facing a challenge with dynamically resizing a grid of divs. The issue lies with the container d ...

how to implement dynamic water fill effects using SVG in an Angular application

Take a look at the code snippet here HTML TypeScript data = [ { name: 'server1', humidity: '50.9' }, { name: 'server2', humidity: '52.9', }, { name: 'server3', humidity: ...

Every time I try to utilize "useCallback," it results in a TypeError error popping up

I am struggling with an issue related to a const experience that involves creating 6 experiences with their respective popovers. I have been instructed to use useCallback, but every time I attempt to do so, I encounter an error message. This relates to my ...

Having trouble fetching data using $http and promises in AngularJS

I'm having trouble connecting to my RESTful API within my AngularJS application. Despite my efforts, I'm not seeing any data being displayed on the screen. It seems like I might be misunderstanding the usage of $http with promises. Any suggestio ...

Tips for preventing the inheritance of .css styles in React

I'm facing an issue with my react application. The App.js fragment is displayed below: import ServiceManual from './components/pages/ServiceManual' import './App.css'; const App = () => { return ( <> ...

What is the alternative method of sending a POST request instead of using PUT or DELETE in Ember?

Is there a way to update or delete a record using the POST verb in Ember RESTAdapter? The default behavior is to send json using PUT or DELETE verbs, but those are blocked where I work. I was wondering if there's a way to mimic Rails behavior by send ...

What are some ways to create a div section within a Google Map interface?

Is there a way to create a div area within the Google map iframe? Some of my code is already prepared here (). The image in this link (https://i.sstatic.net/92gkt.png) illustrates exactly what I'm trying to achieve. ...

When Vue detects a change in declared parameters from an empty string, it automatically sends a

Within my application, I am making a request to the backend app and receiving a response with an ID such as { 'id': '12345'}. This ID is then saved as loadId within the data object: export default { name: 'SyncProducts', d ...

Executing unique calculations on Kendo UI Grid Columns

For experienced users, this may seem simple, but as a newcomer, I'm struggling with a basic arithmetic task. I want to multiply one of the column values (DealValue) by 0.05 in my Kendo grid setup. Despite looking through the Kendo docs, I couldn' ...

I am looking to modify the appearance of specific sections of a searched word in React.js, such as making them bold or lighter. Can anyone

After coming across several similar questions, I realized none quite matched my issue. Specifically, I am attempting to style only the part of the search result that relates to the entered query. For instance, if the query is "Thi", I want the result to di ...

The value of the ng-model checkbox does not update or change when the checkbox is clicked

There is a checkbox being used in the code snippet below: <input type="checkbox" ng-click="toggleShowOtherUserConfiguration()" ng-model="showOtherUserConfiguration" name="ShowOtherUserConfiguration" value="showOtherUserConfigurati ...

What is the best way to show input choices once an option has been chosen from the 'select class' dropdown menu?

When it comes to displaying different options based on user selection, the following HTML code is what I've been using: <select class="form-control input-lg" style="text-align:center"> <option value="type">-- Select a Type --</opti ...

How can you retrieve the input value in JavaScript when the cursor is not focused?

Here is an input I am working with: <a-form-item label="user" :colon="false"> <a-input placeholder="user" name="user" @keyup.enter="checkUser"/> </a-form-item> Within my methods: chec ...

Creating a custom HTML5 canvas with images from a JSON array

I am currently working on a project to develop a unique slideshow feature by hosting images in an external JSON array and then loading them onto an HTML page. The next step is to insert these images onto an HTML5 canvas. While I have successfully loaded a ...

Using cookies for authentication in Angular 5

Currently, I am in the process of building a website with Angular 5 and Express JS. One issue I am facing is that after a successful login, the access_token cookie is being sent from the server to the client. Although the cookie is successfully set in th ...