What is the best approach to transforming a parameterized URL into a directory structure in NextJS while maintaining the page's state upon

I'm having a simple issue that I can't seem to figure out. Whenever I type /login in the URL, I want to stay on the homepage instead of being redirected to /pages/login (which currently gives a 404 error). I also need to keep it as a GET parameter to toggle my LoginModal.

import Link from 'next/link'

// components/Header.js
<Link href="/?login" as="/login">
   <LoginButton />
</Link>

// components/Auth.js
const Auth = () => {
    const router = useRouter()
    return (
        <>
            { 'login' in router.query && <LoginModal />}
            { 'register' in router.query && <RegisterModal />}
        </>
    )
}

// pages/index.js
const Index = () => {
  return (
    <>
      <Header />
      <HomePage />
      <Auth />
    </>
  )
}

// pages/login.js doesn't exist

Any help would be appreciated. Thank you!

Answer №1

The latest update in NextJS version 9.5 has resolved this issue using Rewrite functionality. Visit this link for more information.

// nextjs.config.js

module.exports = {
  async rewrites() {
    return [
      {
        source: '/login',
        destination: '/?login',
      },
      {
        source: '/register',
        destination: '/?register',
      },
    ]
  },
}

Everything is now functioning perfectly with this setup.

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

The property 'titulo' of 'actividad' cannot be destructured because it is currently undefined

I'm currently utilizing the useParams hook to fetch a custom component. It successfully renders the id, but nothing more. Here's a snippet of my code: import React, { useState } from "react"; import { Link } from "react-router-dom ...

Issue encountered while attempting to load bootstrap in NodeJS

I encountered an error while running my jasmine test case in node. The error message says that TypeError: $(...).modal is not a function. This error pertains to a modal dialog, which is essentially a bootstrap component. To address this issue, I attempted ...

Guide on removing the parent JSON array while retaining the child JSON array

I have been searching for a solution to remove specific JSON array elements, but I have not found one yet. Here is the JSON data I am working with: [ { "KODE": [ { "name": "kode", "value": [ ...

Most effective method for streamlining conditional checks in JavaScript

To enhance the quality of my code and improve its readability, I have decided to implement a currying functions approach and create pure helper functions for repetitive code snippets. One issue I noticed was the frequent existence/type checks throughout my ...

Incorporate JSON information into a sleek Bootstrap modal interface

I am looking to load a JSON file to generate a list within a Bootstrap Modal. The setup I have allows for the modal to appear when clicking on a person's image. <li class="project span3" data-type="pfa"> <a data-toggle="modal" data-targe ...

Guide to generating a text string by utilizing the foreach loop

Is there a way to combine text strings from interfaces into a single file for display in UI? The current code is generating separate files for each interface. How can I achieve the expected result of having all interfaces in one file? Additionally, is it ...

Is it possible to include multiple eventTypes in a single function call?

I have created a function in my service which looks like this: public refresh(area: string) { this.eventEmitter.emit({ area }); } The area parameter is used to update all child components when triggered by a click event in the parent. // Child Comp ...

Determine the value of a field by utilizing the values of two other fields through an onChange event

Setting the Stage: Imagine a scenario with 3 key fields: quantity, singlePrice, and totalPrice. I want these fields to be part of my form, with totalPrice being dynamically recalculated whenever quantity or singlePrice changes. My Approach: I created ...

Experimenting with mocha and Nightmare.js, utilizing traditional syntax and without the use of ES6 features

Here is a real-world example that I am using: How to Use Nightmare.js without ES6 Syntax and Yield However, when I include it in a Mocha test, it times out. Here's the code snippet: describe('Google', function() { it('should perform ...

Issue with alert dismissal button not visible

I am dynamically updating the alert message: <div id="alert" hidden="hidden"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> </div> $('#alert').addClass("alert alert-dan ...

What is the method for obtaining a dynamic route path within the pages directory in Next.js?

In my code, I have a special Layout component that compares routing queries and displays the appropriate layout based on the query. I'm looking to extend this functionality to handle dynamic routing scenarios, such as invoices/invoice-1. Currently, ...

Updating React state via child components

Encountering a strange issue while working on a project, I managed to replicate it in this jsfiddle. The parent component's state seems to be affected when the child component updates its state. Any insights on what might be causing this? Here is the ...

Strategies for handling numerous node projects efficiently?

Currently, we are utilizing three distinct node projects: Project 1, Project 2, and Project 3 incorporating react and webpack. Each of these projects is stored in their individual repositories. While Project 1 and Project 2 operate independently, Project ...

Enhance your React project by incorporating Material-UI card media elements with the ability to add

I am trying to figure out how to create an opaque colored overlay on top of an image using Material-UI. While it is possible with plain HTML, CSS, and JavaScript, I am facing some challenges with Material-UI. <Card> <CardMedia> <im ...

What is the best way to update a specific element within a web page?

My current implementation involves utilizing this code snippet within a functional component : return ( <div style={{ height: "700px", overflow: "auto" }}> <InfiniteScroll pageStart={0} loadMore={Fet ...

JavaScript: Exploring Content Inside Headers

Using document.body.innerHTML allows you to search within the body of a webpage. Is there an equivalent method for searching within the "Head" section? I've been looking around but so far, I haven't come across any such function. ...

Error: Unable to access the 'comments' property of a null value

Encountering an issue when trying to add comments to a post, resulting in the error message: TypeError: Cannot read property 'comments' of null Post routes: router.post("/", async (req, res) => { console.log(req.params); Post.findById(r ...

Error compiling: Cannot locate module '../../common/form' within 'src/components/time'

An attempt to import the file form.jsx into the file time.jsx resulted in an error: Error message: Module not found: Can't resolve '../../common/form' in 'src/components/time' //src //common //form.jsx //compon ...

How can data be sent to an AJAX request using jQuery?

Every time I attempt to send data through ajax, it doesn't seem to pass the data along. $('#savenew').click(function () { var user = <?php echo $user?>; $.ajax({ type: "POST", url: "actions/sub.php", data: user, su ...

Acquire the jQuery cookie with the power of AngularJS

I am currently utilizing jquery.cookie v1.4.1 to set a cookie in the following manner: $.cookie('userCookie', $("#user").val()); The value returned by $("#user").val() is typically something like 'username' Now, within an angular app ...