React router unpkg5/19/2023 This component should only render on the '/about' path (but not on the actual '/about' page)Ĭonst container = document. Var BrowserRouter = ReactRouterDOM.BrowserRouter If you want to rapidly prototype with this on your site, here’s the code: Here’s my demo link to play around with it: Ideally, you’d reserve Single Page Routing for Single Page Apps, and optimize your React app to work in a multi page setting like Webflow. This is absolutely a hack and not recommended - just a proof of concept. mounting identical react apps in the same place on every Webflow page using the routing logic. ![]() making sure that each Route in React Router actually exists on Webflow.My workaround, without relying on hash routes, was to think in the Single Page App paradigm and apply it as best as possible to Webflow. React Router DOM is for web applications and React Router Native is for mobile applications made with. The primary difference between them lies in their usage. They are technically three different packages: React Router, React Router DOM, and React Router Native. This is why you can mount an entire React app inside of a Webflow page and have the routing logic work as expected, but the second you refresh the site on a path that doesn’t actually exist in Webflow, you’ll get a PAGE NOT FOUND error. The very first step to using React Router is to install the appropriate package. It’s expecting your pages to be React components and not actual html pages that Webflow generates. Otherwise I guess well need to publish a UMD. What I quickly remembered is that React Router was designed for single page apps. Im going to re-open this and see if we can just inline remix-run/router in to the react-router-dom UMD bundle. ![]() I too have been curious about how React Router works with Webflow. Hey know you answered your own question already, but I did some experimentation of my own and wanted to share my findings in case its helpful:
0 Comments
Leave a Reply. |