Ionic 5 React page crashes on device when window location href has email

Question

I have a ionic-refresher component, and in it i am trying to use window.location.href, and it works when i do not have any variables in the value, like this

window.location.href = '/tab1';

but it does not work when i do have variables, like this

window.location.href = '/listing/' + id

Any ideas on how to solve this?

What i have tried is window.open(), window.replace(), history.go(0), history.push().

Full code here

<IonRefresher slot='fixed' onIonRefresh={doRefresh} 
    pullFactor={0.5} pullMin={100} pullMax={200}>
    <IonRefresherContent></IonRefresherContent>
</IonRefresher>

function doRefresh(event: CustomEvent<RefresherEventDetail>) {
        
        // window.open("/listings/" + id.id, "_self")
        
        // history.push("/listings/" + id.id)
  
        // history.go(0)

      }

EDIT: It's able to catch the variables, but not email id specifically. I will make it work with user id instead of email id.

maybe concatenate the string and the variable first, store it as a new variable (or even the old one) and set the href equal to only your new var? — Baby_Boy, Jan 26 '21 at 13:50
don't know then, I just thought the program your using might not like two values — Baby_Boy, Jan 26 '21 at 18:27

score 0 · Answer 1 · answered Jan 27 '21 at 04:06

0

First Upon you will check that you define your path with id like <Route path="/listings/:id" component={listening}/> in App.js

then you will do

function doRefresh(event: CustomEvent<RefresherEventDetail>) {
      
     history.push(`/listings/${id.id}`)
        
  }

answered Jan 27 '21 at 04:06

I already have a route with ``` – sid0972 Jan 27 '21 at 08:34
have you get an id with in the function? – Jan 27 '21 at 08:45
Yes i have a different Id i can work with, which does not have email address in it. – sid0972 Jan 27 '21 at 08:54
email_id, you mean? – Jan 27 '21 at 09:02
here you go https://stackblitz.com/edit/react-kgqbjq yes email id – sid0972 Jan 27 '21 at 09:07
i think it contains a type annotation that can only be supported by typescript and stackblitz is react only – sid0972 Jan 27 '21 at 13:38
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/227931/discussion-between-rijo-rajan-and-sid0972). – Jan 28 '21 at 03:18

score 0 · Answer 2 · answered Jan 28 '21 at 11:25

0

To anyone who is wondering, i encoded the url using base64 and then decoded it to handle email address. More information here

answered Jan 28 '21 at 11:25

sid0972

141
1
4
13

Ionic 5 React page crashes on device when window location href has email

2 Answers2