Changing the destination URL containing a hash using Next JS

In my project built with Next.js, I am facing a challenge where I need to set up a redirect for URLs containing the character "#" symbol.

For instance, when a user visits /contact#support, I want it to automatically redirect to /contact-us/support

First Attempt:

{
"source": "/contact#support",
"destination": "/contact-us/support",
"permanent": true
},

Second Attempt: trying to use regex matching

{
"source": "/:slug(^contact#support$)",
"destination": "/contact-us/support",
"permanent": true
},

I'm not certain if this type of setup is feasible. I've searched through various forums but have not found any discussions addressing this specific scenario.

Answer №1

After careful consideration, I decided to implement a client-side redirect solution

const currentPath = window.location.pathname;
const currentHash = window.location.hash;
const newUrl = currentPath + currentHash;

switch (newUrl) {
case '/contact#support':
    window.location.replace('/contact-us/support');
    break;
default:
    window.location.replace('/');
}

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

Modify AngularJS behavior to show or hide elements when the user hovers over them

In my template, I display a series of "icons". <div ng-repeat="data in items | orderBy:'-timestamp'"> <div class="icon"> <i>1</i> <span>2</span> </div> </div> To hide i and ...

Is it possible to configure the jQuery datepicker to function without displaying the year?

I am looking to incorporate a datepicker into a project centered around historical events on specific dates. The concept is for users to select a day, such as "Nov. 20," and have the project display historical events from various years on that same day. ...

PDFJS is incompatible with PhantomJS

Currently, I am developing an angular application that incorporates Mozilla's PDFJS library. However, during the unit testing phase of the project, it appears that PhantomJS is unable to locate certain components of the PDFJS library. This is the spe ...

Step back one iteration within the Array.prototype.map method

Can you reverse an iteration step in JavaScript when using Array.prototype.map or Array.prototype.forEach? For instance, if the current index is 2, is it possible to go back to index 1 within these methods? While we can easily achieve this with a standar ...

Creating a bootstrap carousel configuration

I recently encountered a problem while using a single bootstrap carousel. The carousel contains multiple items/images to display, with one of them needing to be active initially. Below is the code snippet: <div id="myCarousel" class="caro ...

Guide to transforming text fields into input elements in Angular 4

Explore My HTML Seeking to incorporate a one-click edit feature that converts all fields into input boxes easily. Check out my HTML snippet below: <div class="col-md-3"> <div class="add-details"> <span>LemonCandy, ...

The unresponsive sticky navigation bar on a Joomla website is causing issues

I recently launched a new website that can be found here. The site includes the following JavaScript code: $(document).ready(function(){ $(window).bind('scroll', function() { var navHeight = $( window ).height() - 70; ...

Error: The value of data.isbn is not defined

After encountering the error message below: TypeError: data.isbn is undefined I modified the code to include the data.isbn == null condition as shown below: $.ajax({ type: "POST", url: "getInventory.php", datatype: "json", data: ({skuSta ...

What is the best way to increase a JavaScript date by 1 UTC day?

Is there a way to use javascript to take a non-UTC date, add 1 UTC day to it, reset the time to zero, and then convert it to an ISO string? new Date().toISOString() 2017-10-10T16:00:49.915Z Required UTC Datestring 2017-10-11T00:00:00.000Z ...

Challenges with resizing windows in jQuery

I'm currently working on optimizing my jQuery code and everything seems to be running smoothly so far: jQuery $(document).ready(function(){ $(".fadeinbg").click(function(){ $("#content").fadeIn(); }); var height = $(window).height() ...

"The power of Node JS in handling JSON data and gracefully

I'm having trouble extracting a specific part of a JSON object in Node JS. When I print the response body, the entire object is displayed correctly. However, when I try to access object.subsonic-response, it returns NaN. I've spent a lot of time ...

Tips for displaying the data on top of individual column bars: Hightcharts, Vue-chartkick, and Cube Js

Looking for assistance with adding value labels to the top of each column bar in a Vue chart using chartkick and highcharts. https://i.sstatic.net/c4Bwc.jpg Check out the image above to see my current output. <template> <column-chart lable= ...

Retrieve the data stored in a concealed input field within a specific row of a table

I am dealing with an automatically generated table that is populated with data from a database and built using jQuery. The table is created by appending the following tr variable to the main tbody section of the HTML code: Below you can find my code snippe ...

Encountering a 404 error in Angular MVC project while trying to load a

Trying to access an edit partial named AddEditPersonModal.cshtml from a different folder in my MVC project, in order to load its contents into a UI Bootstrap modal using Angular. However, when the index.cshtml page loads, I encounter a 404 error related to ...

Having difficulty toggling a <div> element with jQuery

I am attempting to implement a button that toggles the visibility of a div containing replies to comments. My goal is to have the ability to hide and display the replies by clicking the button. The "show all replies" button should only appear if there are ...

Tips for changing the value of a Django query set?

I have a query: def get_comment_tree(request): news_id = request.GET.get("news_id") ret = list(Comment.objects.filter(news_id=news_id).values("nid", "content", "parent_comment_id", "user", "cre ...

The second JSP page fails to load following an AJAX POST request

The following code snippet is found in page1.jsp. $.ajax({ type: "post", url: "page2.jsp", data: newdata, success:function(msg){ return msg; } ...

DxDataGrid: Implementing a comprehensive validation system for multiple edit fields

I'm currently working with a DxDataGrid within an Angular Application. Within this particular application, I have the need to input four dates. I've implemented validation rules that work well for each individual field. However, my challenge aris ...

Making Monaco compatible with the integration of Vuejs and electron

I am intrigued by the idea of integrating the Monaco editor into a Vue.js backed Electron project. So far, I have successfully run Microsoft's Electron sample for the Monaco editor. There are several npm repositories for vue.js and monaco, but none o ...

Tips for preventing the occurrence of undefined when retrieving data?

After fetching data from mongo, I encountered an issue where my useState([]) is initially defined as undefined. Can someone please offer a solution to this problem? const router = useRouter() const {id} = router.query console.log(id) // f ...