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
I'm in the process of migrating our app from react-router v3 to v6, and we have an <Html> component (to display raw, sanitized HTML) which catches link clicks and tries to figure out whether it link should use the current router.
We have 3 different apps, with their own router and basename. In v3, we did it this way:
// `location` and `router` comes from the v3 `withRouter` HOC// If same basename as current location, use routerif('basename'inlocation&&typeoflocation.basename==='string'&&e.target.pathname.startsWith(location.basename)){e.preventDefault();returnrouter.push(e.target.pathname.substring(location.basename.length));}
I first tried to just switch to useLocation (and useNavigate), but in v6, there seems to be no basename in the location, like there was in v3. Can't seem to find any other way to get the basename using v6 hooks either. I also can't just export it from where I set up the router, because there are 3 different ones and I need the basename from the current router.
I've worked around it for now by not using any react-router hooks at all, and instead using window.location:
// If same basename as current location, use routerconstbasename=window.location.pathname.match(/^\/[^/]+/)?.[0];if(basename!=null&&e.target.pathname.startsWith(basename)){e.preventDefault();returnnavigate(e.target.pathname.substring(basename.length));}
This seems to work, but does feel a bit iffy. Both because I'm "bypassing" react-router and using window.location directly, and also because of using a regex to find the basename.
Is there a better/proper way in v6 to check if an absolute URL "belongs" to the current router, with the current router basename taken into account?
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
Uh oh!
There was an error while loading. Please reload this page.
-
I'm in the process of migrating our app from
react-routerv3 to v6, and we have an<Html>component (to display raw, sanitized HTML) which catches link clicks and tries to figure out whether it link should use the current router.We have 3 different apps, with their own router and basename. In v3, we did it this way:
I first tried to just switch to
useLocation(anduseNavigate), but in v6, there seems to be nobasenamein thelocation, like there was in v3. Can't seem to find any other way to get thebasenameusing v6 hooks either. I also can't just export it from where I set up the router, because there are 3 different ones and I need thebasenamefrom the current router.I've worked around it for now by not using any
react-routerhooks at all, and instead usingwindow.location:This seems to work, but does feel a bit iffy. Both because I'm "bypassing" react-router and using
window.locationdirectly, and also because of using a regex to find the basename.Is there a better/proper way in v6 to check if an absolute URL "belongs" to the current router, with the current router basename taken into account?
Beta Was this translation helpful? Give feedback.
All reactions