1

useEffect Hook execute 3 lifecycle i.e., [componentDidMount, componentDidUpdate and ComponentWillUnmount].

With this I am trying to reload my page only once if Country page is visited..

https://codesandbox.io/s/angry-nash-rc98mw?file=/src/index.js

Question: How to make this working using Route.

root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" Component={App} />
      <Route path="/country" Component={Country} />
    </Routes>
  </BrowserRouter>
);

If Can help answering the following POST. I'd appreciate it.

https://github.com/WICG/webcomponents/issues/754

enter image description here

SO SOLUTION I CAN THINK OF IS

RELOAD THE PAGE.

I have created my Custom element using react-to-webcomponent

Honey Singh
  • 362
  • 8
  • Why are you reloading every time `App` is rendered? – Unmitigated Mar 26 '23 at 03:12
  • 1
    What are you trying to do? You have coded an infinite loop here. – Tim Roberts Mar 26 '23 at 03:13
  • @Unmitigated So I wanted to load ```Country``` page one time whenever it is visited/routed. May I know how to achieve this.? – Honey Singh Mar 26 '23 at 03:22
  • 1
    What's the issue with your code now? `/country` shows the Country component. – Unmitigated Mar 26 '23 at 03:28
  • Issue faced by me is while rendering an External Web Components in my React Project. No one was able to answer on how to remove a customElement if defined once. So my only solution is to reload the page so a custom element will get removed``` – Honey Singh Mar 26 '23 at 03:33
  • 1
    Seems like an [XY problem](https://xyproblem.info/). – Unmitigated Mar 26 '23 at 03:35
  • @Unmitigated if you think so then please answer to this problem https://github.com/WICG/webcomponents/issues/754 – Honey Singh Mar 26 '23 at 03:39
  • @Unmitigated And that is the reason why I want to reload the page so to again define my element since I cannot remove it. – Honey Singh Mar 26 '23 at 03:39
  • @TimRoberts Can you please help me to reload the page once if Country is visited. Is it even possible to do that. Please let me know. Thanks. – Honey Singh Mar 26 '23 at 03:51
  • @BhokluSingh why are you re-defining a custom web component? Are you doing it because they are changing on the fly? – chq Mar 26 '23 at 03:56
  • @chq I am not redefining a custom element. . Whenever a component having custom-element is mounted, that custom element gets defined once. .So when that component is demounted, the same custom-element is not removed by React. On visiting the same component again, React tries to define the custom-element which was earlier defined. Here it throws errors saying that you cannot define an existing custom element. The solution is to reload the page. – Honey Singh Mar 26 '23 at 04:17
  • @BhokluSingh reloading is an anty pattern. React is specificy made to avoid reloading, and work on a single page application. – chq Mar 26 '23 at 04:31
  • @BhokluSing Its really strange that you are using HTML Custom Elements and React on the same application... but since you are already working in an anti-pattern, what you should do is just hide the error with a try-catch instead of making user experience worse by reloading. – chq Mar 26 '23 at 04:34
  • @chq- On visiting ComponentA having ```React-Custom-Ele-One``` first time all works well. Now I wanted to switch to ComponentB having ```React-Custom-Ele-Two```. Even now its working as expected. Now If I try to navigate to ComponentA having ```React-Custom-Ele-One``` the page stops responding. . And the error in the console saying ```cannot refine custom element```. . So now on reloading the page, I can view the componentA. – Honey Singh Mar 26 '23 at 04:41
  • 2
    Insulting those who are trying to help you is not a good path towards an answer. The reason for the poor response here is that you have described your problem extremely poorly. If you need a reload, then you have a bug in your Javascript code that is causing an element to be redefined, but since you haven't shown that to us, what can we possibly do? – Tim Roberts Mar 26 '23 at 04:50
  • @TimRoberts And I do not see any bug in my JavaScript code. It works extremely well in Wordpress pages or other HTML pages. I exported my web component using ```react-to-webcomponent``` library as seen above. – Honey Singh Mar 26 '23 at 05:01

1 Answers1

1

I should be solved with: forceRefresh={true}

<Route path="/country" forceRefresh={true} Component={Country} />

More info here: https://www.oreilly.com/library/view/react-router-quick/9781789532555/233f59d9-5f18-4ea8-a7f9-cd9b27435025.xhtml

But found the suggestion in stack overflow here: How to refresh page with React Router?

Im not able to verify it since I need the console.log() that was not available on the sandbox.

However as was pointed out in the comments of the question. I think this a bad workaround for another bug in the code (That was not included in your example that should probably be solved instead). With reload the whole page you lose the benefits of React.

starking
  • 153
  • 10
  • I appreciate your response. But I have tried all these before posting my question. Nevertheless I am going to create a demo project and re-post this question so that helpers can see the actual error which I am facing. Thanks – Honey Singh Mar 26 '23 at 05:29