CODEWITHSUNDEEP
javascriptlaravelreactjsbrowserify
Semyon Zhikharev
Semyon Zhikharev

Reputation: 664

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

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?

    Upvotes: 8

    Views: 6210

    • Answers (1)

    Guilherme Rodrigues
    Guilherme Rodrigues

    Reputation: 2844

    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.

    Upvotes: 4

    Related Questions