DangerouslySetInnerHTML is not working as intended when using react-router-dom

[elco45]

What version of million are you using?

3.0.6

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

I'm currently trying to add an html script into a div, e.g.:

<div dangerouslySetInnerHTML={{ __html: '<p>test</p>' }}></div>

To do this, I use dangerouslySetInnerHTML as shown above and I'm getting this as the rendered result:

<div dangerouslysetinnerhtml="[object Object]"></div>

^ This only happens when we render it inside a route from react-router-dom.

What's the expected result?

I would expect it to return me the html set on the __html value:

<div>
  <p>qwdqw</p>
</div>

Link to Minimal Reproducible Example

https://stackblitz.com/edit/vitejs-vite-m4tewo?file=src%2FApp.tsx

Participation

• [ ] I am willing to submit a pull request for this issue.

[github-actions[bot]]

Thanks for opening this issue! A maintainer will review it soon.

[tobySolutions]

Hmm, can you please provide a reproduction @elco45?

[elco45]

My bad, I just created a project from scratch and it seems to be working well. Might be some other configuration that is causing this issue. Will return if I find a better source to the issue...

[tobySolutions]

Ok, great! Thanks!

[elco45]

Found the issue. This weird behaviour happens when I use react-router-dom.

https://stackblitz.com/edit/vitejs-vite-m4tewo?file=src%2FApp.tsx

^ Here is the stackblitz for testing. I've added a test variable that you can change to true/false to see the difference.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.