Return to the previous URL

I am currently facing an issue where I want to go back to the parent URL when a specific option is changed and there are additional route parameters, but maintain the current URL if there are no route parameters.

To better illustrate this problem, let me provide you with an example.

Consider that I have 3 components: CompA, CompB, and CompC, each containing a list of items. When navigating to any of these components, the URL reflects either /compA, /compB, or /compC.

It is also possible to navigate within each component to a specific item, represented in the URL as /compA/item1.

My goal is to have a dropdown menu to select a particular client and then based on whether route parameters are present, either navigate back to the parent or retain the current route.

For instance, if I am on /compA/item2 and change the client, I expect to be redirected to /compA. On the other hand, if I'm on /compB and switch clients, I should stay on /compB.

Although I attempted using the following code snippet:

this.router.navigate(['.'], { relativeTo: this.activeRoute.parent });

it did not work as expected for me.

angulartypescriptangular-routing

Answer №1

When using . in a file path, it refers to the current directory. On the other hand, ../ indicates moving one level up from the current location.

this.router.navigate(['../'], { relativeTo: this.activeRoute.parent });

Answer №2

I was able to figure out the problem by employing the following method:

let currentURL = window.location.pathname.split('/')[1];
window.location.href = '/' + currentURL;

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

Definition of union types in JavaScript using Typescript

Looking for assistance in creating a d.ts file for the union-type library found at https://github.com/paldepind/union-type Consider the following union type: let Maybe = Type({ Nothing: [] , Just: [Number] }) I am interested in setting up compi ...

javascripttypescriptdefinitelytyped

Add a calendar icon to the DateRangePicker in React Mui

I am trying to set up a DateRangePicker using Material UI with a calendar icon. Here is an example of how I want it to look: https://i.stack.imgur.com/LnYnY.png After following the API documentation and using this code: components={{ OpenPickerIcon: Cal ...

reactjstypescriptmaterial-uireact-typescript

Ensure that a function completes before moving on in JavaScript

I am attempting to modify the save method so that it waits for this.collection.create() to complete before running, in order to prevent a potential crash. class UserRepository extends BaseRepository<User> { constructor() { super(); ...

javascripttypescriptdesign-patternsecmascript-6repository-pattern

Exploring the Capabilities of TypeScript 1.8 in Visual Studio 2017

Recently, I've encountered an issue with my Visual Studio project that was created using TypeScript 1.8 in Visual Studio 2015. Upon upgrading to Visual Studio 2017 and attempting to open the project in the new IDE, I noticed that the TypeScript versio ...

typescriptvisual-studio-2017

Issue with pre-selected default value in AngularJS TypeScript Kendo UI DropDownList

I have successfully implemented a list of objects for items, but now I am facing a challenge in adding a default selected value. Below is the HTML code for the drop-down: <select kendo-drop-down-list k-options="selectItems" k-ng-mode ...

angularjstypescriptkendo-uidropdowndefault-selected

The defaultRowRenderer is causing issues with my Jest unit test. It seems to be related to an object with an anonymous import of createMulti

Encountering a failure in jest unit-tests when using the defaultRowRenderer method in react-virtualized for a Table component, with the error message: ...node_modules\react-virtualized\dist\es\Table\index.js:1 ({"Object.<anonym ...

typescriptjestjsreact-virtualizedunexpected-token

Can an App be duplicated from Chrome sources even if it displays all files except for the package.json?

I recently came across a React platform that I would like to dissect in order to gain a deeper understanding of it and potentially redesign it for a future project. Though the platform seems to have all the necessary files, I am unsure if I may be missing ...

javascriptreactjsarraystypescriptwebpack

How can I transform this statement into a higher-order function that offers a resource instead of using an object for initialization and destruction?

Starting with this code snippet: convert utilizes svgInjector to start and terminate a resource. export async function convert( serializedSvg: string, svgSourceId: string, containerId: string ): Promise<string> { const svgInjector = new SvgI ...

javascripttypescriptfunctional-programminghigher-order-functions

Navigating to a PDF file in Angular 2: A step-by-step guide

My problem is trying to load a PDF file on the client side for display in the browser. I've attempted using a normal href with a path relative to the HTML file, but it doesn't seem to be working. <a href="../assets/file.pdf>Get File</a& ...

angularroutes

Why has request.query changed from 'any' in Express? TypeScript error with request.query types

Upon running npm i, I encountered an error when trying to pass query parameters to a function that expects a string: Argument of type 'string | Query | (string | Query)[]' is not assignable to parameter of type 'string'. Type 'Quer ...

node.jstypescriptexpress

Enhance the API response for Angular service purposes

I am currently working on modifying the response returned by an API request. At the moment, I receive the response as: [ { name: "Afghanistan" }, { name: "Åland Islands" } ] My goal is to adjust it to: [ { name: "A ...

angulartypescriptrxjs

Struggling to capture the error thrown by the subscribe method in Angular using RxJs

In following the most recent tutorial, I learned about using pipe, tap, and catchError to intercept the result. This is what I currently have: getStatus(): Observable<boolean> { return this.http.get<boolean>('/status').pipe( ...

angularrxjs

Resetting a Template-Driven form in Angular using programming techniques

Exploring Angular/Typescript as a newcomer with the use of Template-Driven forms in Angular 10. Attempting to reset the form without submitting it or relying on button clicks. Despite researching similar issues, they all entail submitting the form for a re ...

angulartypescriptformsangular10

Encountering a TypeScript error within the queryFn while implementing Supabase authentication alongside React Toolkit Query

I've been attempting to integrate Supabase authentication with React Toolkit Query but encountering an issue with the utilization of the queryFn. Here is the code snippet that employs supabase.auth.signUp to register a user using email/password. You ...

reactjstypescriptreact-typescriptrtk-querysupabase-js

Functionality for communicating components is only operational on a single platform

I am looking to create a service that can notify my components when there are any changes to the 'idCustomer' property. These changes should trigger certain actions in different components. Currently, I am using console.log to check if the change ...

angulartypescript

When a button is triggered, it should initiate a click event on an input in TypeScript

I have created a color picker that is visible on a page. When clicked, it displays a dropdown menu of colors for selection. However, my objective is to hide the color picker initially and only reveal it when a specific button is clicked. This way, the dro ...

javascripthtmltypescriptcolor-picker

Unlock the ability to view the specific child route with the identifier :id

In my application, I have a child component and its parent component. The child component uses the following pipe to subscribe to the activated route: this.route.paramMap.pipe( map(paramMap => +paramMap.get('id')), switchMap((id: number) ...

angulartypescript

Both buttons are calling the same function in Angular 6

I have created a component called add-customer.component.html <form [formGroup]="addCusForm"> <div id="login-container"> <h2 class="add-title">Customer Details</h2> <mat-form-field class="example-full-width ...

angularangular6

Attempting to release a new VS Code Extension to enhance user experience

After developing a TypeScript app, my goal is to convert it into a VS Code extension and publish it on the Visual Studio Code Marketplace. I have attempted following the steps in the official documentation, but found that the commands provided there crea ...

typescriptvscode-extensions

Angular ng2-chart: i would like to showcase both the actual value and a corresponding percentage value, sourced from a different location but sharing the same index

I have incorporated an angular doughnut chart from ng2-chart and I am currently working on customizing the tooltip. In my scenario, in addition to displaying the tooltip label and value, there is another value - a percentage. While the doughnut chart displ ...

angularng2-charts