How to use react.js with a multi page website (Non SPA)?

Question

I have a laravel app. For pages with such routing: /admin/entity/ i want to use react components with react router to handle /admin/entity/:id route.

If i use browserify to bundle all components in one file, i can't access any component to render it from outside since browserify wraps it to closure. Thus, i have few questions:

Should i create separate bundle.js file for each page and render components explicitly in that file?

Or should i precompile each component from jsx to js and render it inline from *.blade.php file?

Does it make sense to include react library to bundle.js or i can load it explicitly from view?

Answer 1

Here are my opinions:

• You should bundle React and all your code in all pages that will have any part rendered by React components (From what I gather, /admin/entity).
• Your React component should always be rendered to a specific element (e.g., an empty <div>) and should have something like a React Router configured so that it ignores /admin/entity but renders /admin/entity/:id. Your challenge is that any links that point to a different :id URL should optimally be inside the React components, using Link components. This will hook up your router automatically.

Your routes will probably look like this:

<Route path="admin/entity/:id" handler={Entity} />

I believe that, when you run the Router, if the browser's URL isn't in the expected format, React won't actually render anything.