在现有应用程序中将React应用程序与React-Router 4嵌入

Question

I have an existing rails app that has a lot of core functionality and I've built out a react router app that will exist on a particular wildcard path of that rails app's routing.

How do I stop the react-routes plugin from intercepting all links

Say I have mounted my app at /reactApp/* and I have other links like /dashboard, /account etc, the react-routes plugin will intercept the external link clicks (the react app is mounted on a div in the middle of an existing rails layout). I'd like it to only intercept the link clicks that are defined as routes in the actual react application.

Answer 1

I've put together a basic proof of concept here as to how to do this, it's actually quite cool. For all of the routes that you want to have on your react app, say it's 'superwidget/*' do the following

#routes.rb
 root to: 'dashboard#index'
 get 'superwidget', to: 'react#index'
 get '*superwidget', to: 'react#index'

You'll want to on the 'react#index' component set up skip_before_action :verify_authenticity_token

You can then mount your react app and your rails app will take the URLs it can handle. If you intelligently manage the route schemes you should be tickety boo.

I've even put together an (extremely bad) sample repo here https://github.com/Proximaio/rails-react-example