You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This looks like a great project, thanks for sharing! However, after hours of trying to tweak your examples and examples I found by others, I can't get it to work for my very simple scenario. I'm getting an HTML string from an API in my React app and want to render it but the links are all HTML "a" tags and so clicking them reloads the whole React app. I want to convert all "a" tags to react-router-dom "Link" components where the "href" gets set as the "to" attribute.
So, this:
This is <a href="/the-url-path">some linked text</a>, and <a href="/the-other-path">so is this</a>.
would get converted to this:
This is <Link to="/the-url-path">some linked text</Link>, and <Link to="/the-other-path">so is this</Link>.
I got an example working based on your readme where I return "<Link to='services'>" + children + "</Link>" from the processNode function. That just gets rendered as a string (but at least I know I'm getting the replacements done correctly). I then change it to return just <Link to="/services">{children}</Link> and it fails with this:
Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null.
TypeError: Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null.
at LinkWithRef (http://localhost:3000/static/js/bundle.js:93680:5)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:57575:20)
at renderForwardRef (http://localhost:3000/static/js/bundle.js:57723:22)
at renderElement (http://localhost:3000/static/js/bundle.js:57864:15)
at renderNodeDestructiveImpl (http://localhost:3000/static/js/bundle.js:57950:15)
at renderNodeDestructive (http://localhost:3000/static/js/bundle.js:57924:18)
at retryTask (http://localhost:3000/static/js/bundle.js:58308:9)
at performWork (http://localhost:3000/static/js/bundle.js:58349:11)
at http://localhost:3000/static/js/bundle.js:58620:16
at scheduleWork (http://localhost:3000/static/js/bundle.js:52657:7)
I'm new to React and Typescript so I'm getting nowhere with this error. I'm guessing I'm doing something very simple wrong so hoped you might create an example for this very common scenario of rendering Link components in place of all "a" tags in an HTML string. Ideally it would be done in Typescript both here and in a codesandbox or codepen so those still learning won't have to figure out how to add types to Javascript examples in addition to understanding how to use the library.
Any chance someone might consider creating something like that? If not, any ideas on the error above?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
This looks like a great project, thanks for sharing! However, after hours of trying to tweak your examples and examples I found by others, I can't get it to work for my very simple scenario. I'm getting an HTML string from an API in my React app and want to render it but the links are all HTML "a" tags and so clicking them reloads the whole React app. I want to convert all "a" tags to react-router-dom "Link" components where the "href" gets set as the "to" attribute.
So, this:
would get converted to this:
I got an example working based on your readme where I return
"<Link to='services'>" + children + "</Link>"
from the processNode function. That just gets rendered as a string (but at least I know I'm getting the replacements done correctly). I then change it to return just<Link to="/services">{children}</Link>
and it fails with this:I'm new to React and Typescript so I'm getting nowhere with this error. I'm guessing I'm doing something very simple wrong so hoped you might create an example for this very common scenario of rendering Link components in place of all "a" tags in an HTML string. Ideally it would be done in Typescript both here and in a codesandbox or codepen so those still learning won't have to figure out how to add types to Javascript examples in addition to understanding how to use the library.
Any chance someone might consider creating something like that? If not, any ideas on the error above?
Beta Was this translation helpful? Give feedback.
All reactions