Make a widget re-render everytime parent website URL changes

user_17848757 0
Viewed 89

I'm building a widget and adding it on a react website. Widget does specific tasks based on the URL.

Let's say, I want widget to appear exactly when URL is www.company.com. But the widget appears on "www.company.com/welcome" as well if the user navigated through history.push/ or replace.

Only when a state Change happens inside widget on www.company.com/welcome, it realizes, "oh I am not supposed to appear here".

I'm quite new to programming. I want the widget to re-render everytime the parent website URL changes(and not wait for any state change inside Widget). How to do this?

Currently, this is how finding current URL. I tried 2 approaches.

In the first approach here, on some state change, widget realises it shouldn't come here.....but it requires that state change.

const Main =() ={

let currentUrl = window.location.href;

}

In the 2nd approach, it doesn't work even after a state change.

useEffect(() => {
    let url = window.location.href;
    setCurrentURL(url)

},[currentUrl]);

3rd approach suggested by user, behaves exactly like the above issue.

const Main =() ={
const [url, setUrl] = useState(window.location.href);

}

Something interesting : The widget works properly when it is added on a html website when moved between pages or when navigation is through window.location ="/"

Only when Parent website is navigated through history.push or history.replace and widget doesn't seem to render.

If it's a stupid mistake, feel free to let me know. I have wasted too much time on this problem already and would appreciate any sort of help

reactjs
1 Answers

have you tried looking at useEffect?

DOC: https://reactjs.org/docs/hooks-effect.html

useEffect(() => {
 //****DO SOMETHING HERE WITH YOUR WIDGITS HERE****
}, []); //

you are currently storing the let currentUrl = window.location.href; in a variable are you sure you don't want to use useState() hook?

import { useState } from "react";

const Main =() ={
const [url, setUrl] = useState(window.location.href);

}
user_169358910
Related