javascripts default replace function not working in nextjs

Question

I have simple nextjs app and I am trying to use javascript replace function to replace "-" with empty space " ". But I am getting error as TypeError: Cannot read property 'replace' of undefined. Here is the code

import {useRouter} from 'next/router';
import Layout from '../../components/MyLayout';




 const Post = () => {
    const router = useRouter();

    let resString = router.query.id.replace("-", " ");



    return(
        <Layout>
            <h1>{resString}</h1>
            <p>This is the blog post content.</p>
        </Layout>
    );
}

export default Post;

Well the query string is undefined. const resString = router.query.string ? router.query.string.replace("-", " "): ''; — Roberto Zvjerković
– Roberto Zvjerković, Commented Jan 31, 2020 at 11:17
sorry its router.query.id not string but still I am getting same error when I changed it to id — sriram hegde
– sriram hegde, Commented Jan 31, 2020 at 11:20

Emanuele Scarabattoli · Accepted Answer · 2020-01-31 11:29:47Z

3

The problem is that if the query string is empty you does not have the string property.

First you have to check that the property exists and than use .replace() like in the following example:

let resString = router.query.id ? router.query.id.replace("-", " ") : "";

Also note that you have to use a regex like in the following example to actually replace all the occurrences:

router.query.id.replace(/-/g, " ");

edited Jan 31, 2020 at 11:29

answered Jan 31, 2020 at 11:23

Emanuele Scarabattoli

4,4601 gold badge14 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

sriram hegde Over a year ago

yes I did that but replacement is not happening . I checked the type of router.query.id its saying its a string but I am not able to call replace function on it . when I try normal string it works.

sriram hegde Over a year ago

I have added an image

sriram hegde Over a year ago

I tried toString() to convert it to string even this function its showing error

Emanuele Scarabattoli Over a year ago

Edited with the solution of the last problem you noticed... use the regex as explained here w3schools.com/jsref/jsref_replace.asp

sriram hegde Over a year ago

thanks it worked . But can you explain to me why it didnt work. I am curious

|

Collectives™ on Stack Overflow

javascripts default replace function not working in nextjs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related