Aurelia's navigation feature adds "?id=5" to the URL instead of "/5"

I have set up my Aurelia Router in app.ts using the configureRouter function like this:

configureRouter(config, router: Router) {
        config.map([
            {
                route: ['users', 'users/:userId?'],
                name: 'users',
                moduleId: './users',
                nav: true,
            },
            //…
       ])
}

Later on in my code, I use the Router to navigate to a specific user like so:

showUser(id: number) {
    const params = { userId: id };
    this.router.navigateToRoute("users", params);
}

This method was working perfectly until recently, producing #/users/1. However, after updating npm from aurelia-cli@1beta3 to aurelia-cli@1beta5, it now generates #/users?userId=1 and fails to navigate.

Any idea what might be causing this issue?

Answer №1

It seems like the router is favoring the first route pattern it encounters, resulting in unexpected behavior. To resolve this issue, consider making the route parameter optional by modifying the route definition to be 'users/:userId?'. You can find more information on this in our documentation:

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

Using React-Router-Config to dynamically set the page title

I am seeking advice on how to dynamically set page titles using the configuration file in conjunction with react-router-config. Should I use props or Helmet for this purpose? routes.js const routes = [ { title: 'Home', path: ...

Can't figure out why the BackgroundImage URL from process.env isn't appearing on my website

Having trouble setting a background image on my website that connects with my backend to determine which image should appear. However, in some cases, the image isn't showing up. When attempting to add a background image using the code below within a ...

Hiding the title property while displaying a JQuery tooltip

I have implemented a simple JQuery solution for creating hovering tooltips using text from elements' title attribute. While it is functioning adequately, I am looking to prevent the default browser behavior associated with the title attribute from occ ...

What is the procedure to change a matter body's isStatic property to false in matter.js upon pressing a key?

During my recent project, I encountered a challenge in trying to set the isStatic property of a Matter Body in matter.js to false when a key is pressed. if (keyIsPressed(UP_ARROW)) { this.body.isStatic(false) } Could you provide guidance on the correct ...

When running grunt-bower, I am encountering an error stating that _.object is not a function

I am attempting to execute the grunt-bower task in order to copy all of my bower components. Encountered an error while running "bower:dev" (bower) task TypeError: _.object is not a function at Object.exports.getDests (/Users/wonoh/cocApp/node_modules/g ...

Using React.js - What is the process for submitting a form automatically when the page loads?

Upon loading the page, I have a form that needs to be displayed. Here is the code snippet: <form name="myform" method="POST" className={classes.root} target="mydiv" action="https://example.com/submit" onLoad= ...

Transferring PHP array data into JavaScript array values

A PHP array structure is presented below. Array ( [0] => hal([[br,1],[cl,4]]) [1] => alk([[nc(1),1,2],[nc(1),3]]) ) I need to convert this array into JavaScript format like so: var hal=[["br",1],[cl,4]]; var alk=[[nc(1),1,2],[nc(1),3]]; In ...

What could be the reason why the keypress event doesn't seem to be functioning properly on

Currently, I am utilizing Angular and the Ionic framework. Here is a snippet of the HTML code that I have written: <div><ion-input type="text" id="phoneNumber" [(ngModel)]="phoneNumber" (keypress)="phoneNumericCh ...

A guide to utilizing Forwarding References in react-router-dom

I have a good grasp on Forwarding Refs and react-router-dom, but I'm struggling with the implementation in this particular scenario. The issue lies in trying to correctly use a function in a child component that sets null in a useState hook. I want th ...

Send users from the web (using JavaScript) to the Windows Phone app, and if the app is not installed, direct them

In the following code snippet, I am using angular.js to detect the mobile platform and redirect to the native app. If the app is not installed, it will redirect to the market: $scope.isMobile = { Android: function() { return navigator.userAgent.ma ...

Deactivate CS:GO Dedicated Server using Node.js child_process

I've been attempting to manage multiple Counter Strike: Global Offensive dedicated servers programmatically. The process is running smoothly, however, I am facing a challenge in shutting it down completely. Upon starting the server, two processes are ...

Learn how to gradually make text disappear and reappear using JavaScript or jQuery

I am a beginner in JavaScript and jQuery, and I am trying to achieve a text fade-out effect. Once the text has completely faded out, I want it to return with the same fade-in effect. I have been exploring if statements and fadeIn effects, but I am strugg ...

Adjusting HTML5 drag height while resizing the window

Code conundrum: var dragHeight = window.innerHeight - parseInt(jQuery("#drag_area").css("margin-top")) - 5;. It sets the drag height based on browser size, but there's a glitch. If I start with a non-maximized browser and then maximize it, the drag he ...

What is the best way to insert HTML elements onto a webpage and retrieve them in an asp.net environment?

Greetings, For the past day, I've been attempting to dynamically add elements to a web page using Visual Studio and access their values. Either I'm overthinking things, being foolish, or there just isn't a straightforward way to achieve wha ...

Does the require function in nodejs have any connection to the package.json file?

If 'random_module' is included in the list of dependencies in my package.json file, can I use the code var rm = require("random_module"); to access it? Essentially, does the argument for require function apply to any module listed under the depen ...

discovering obscured information using jquery

I am working on a code snippet where I need to hide the detailed content for display purposes and only show it during printing: <div> <ul> <li> <span style="font-size: 1.25em;"> <strong> ...

How about using a JQuery variable?

I'm a beginner in jQuery and I have this code snippet that displays a div when a specific link on a map is hovered over: <div id="locationmap"> <a class="linkhide" id="link1" href="#">Occupier 1</a> <a class="linkhide" id ...

Develop an array of unique objects with multiple dimensions, ensuring no duplicates are included

Seeking assistance for the following task: I am trying to create a new multidimensional array of objects based on an existing array of objects: [ {number:111, connectedNumber: 112, ...}, {number:112, connectedNumber: 111, ...}, {number:113, connectedNumbe ...

Expanding a class in Angular 2

I am attempting to enhance a method within the Angular package available at this link. import { Component, OnInit, Injectable } from '@angular/core'; import { FILE_UPLOAD_DIRECTIVES, FileUploader } from 'ng2-file-upload'; @Injectable ...

The Rxjs `of` operator fails to emit a value when utilizing proxies

I ran into an issue with a basic unit test that utilizes Substitute.js (I also tried using TypeMoq mocks, but encountered the same behavior). My test simply tries to use the of operator to emit the mocked object. Surprisingly, without any additional opera ...