I'm trying to integrate a React application (using react-router) into an existing Angular website. I've wrapped the React app up in an Angular directive which loads scripts and renders the React app into the DOM. It also listens for the
$destroy event on the scope to unmount the React app.
Everything's working pretty well apart from links. It seems that Angular is automatically binding to every anchor tag in the DOM which is causing the Angular router to pick up clicks on links in the React app. This causes the React app to be unmounted and reinitialised on every link click - this is obviously poor user experience (especially since the React app contains a video player!).
I added a listener for
$locationChangeStart which checks the old and new URLs and calls
preventDefault on the event if the two URLs begin with
/reactapp. This stops the link from being treated like an Angular route but it creates a problem with the URL. It seems that Angular responds to a prevented default on the
$locationChangeStart event by resetting the URL back to what it was before the event was triggered. I've tried calling
history.replaceState after this to reset the URL back to what I want (hacky, I know) but Angular seems to recheck and reset the URL on every
So, my question... is there a way to completely stop Angular from picking up the links from the React app?