0

I would like to integrate react router on an application which has been built on top of Contao CMS 3.5.31. We started rendering react components one at a time on various pages/templates but we will soon need to handle navigation between pages. The main problem that I have is that there is no communication between contao's routing system and react's.

I don't know much about contao and the reading I did on the website's docs seems of little use. In summary, if a page request is made to the server and is not found but exists in react router, I would like to make it so that the application redirects to that page.

Any idea how that might be possible ?

coderdonezo
  • 399
  • 1
  • 12
  • How do you decide which pages should be routed by contao and which by your react router? – Uwe Sep 03 '22 at 22:11
  • Just a side note ... Contao 3.5 is really really long out of date. – Uwe Sep 03 '22 at 22:13
  • @Uwe I know we have already been slowly getting away from the cms, but it will take some time to become completely independant from it so nothing I can do about it until then. As for your first question that is basically the what I want to know how to do. – coderdonezo Sep 03 '22 at 22:32
  • What I mean is how do you decide which page will be served by your react app? For example, if you have a ‘/team‘, do you plan to switch all team sub-pages entries at a certain point? Contao still has to serve some kind of site as far a I understand. Or do you have a standalone react app? Which in this case would be served by your webserver? – Uwe Sep 06 '22 at 11:16
  • In the first case, the approach from here (german - but should work with Translate) explains a szenario with vue ja and vue router for one path (products) of a website. https://www.hit-services.net/blog/javascript-framework-vuejs-in-contao-nutzen.html – Uwe Sep 06 '22 at 11:22

2 Answers2

1

Using hash-based routing like (e.g. /users#list) could solve the problem as long as the part before the hash has been setup by creating a page in contao matching that url (/users in this case). Everything after the hash can be handled by React Router. Refer to this documentation for more information about Hash Routing.

Sirkow
  • 63
  • 9
1

If you don't want to use hash-based routing: the primary question isn't really how to do this in Contao - but how to do this in Symfony. You could use a tutorial like this to get the basics going. However, one thing that you might need to do different is prefixing your route with something, so that you can still serve regular Contao pages (if you need to). So instead of

/**
 * @Route("/{reactRouting}", name="index", defaults={"reactRouting": null})
 */

you would need an arbitrary prefix like

/**
 * @Route("/react/{reactRouting}", name="index", defaults={"reactRouting": null})
 */

and then also configure your BrowserRouter accordingly.

Furthermore, in Contao 4.13+ you can use so called Page Controllers. These work just like regular Symfony controllers, but you can add those pages to your regular Contao site structure and thus you would also be able to define the prefix conveniently via the Contao back end (although you can also hard code the route, see the different path examples).

fritzmg
  • 2,494
  • 3
  • 21
  • 51
  • 1
    I only noticed after the fact the the original author was asking about Contao 3. My comment is for Contao 4+. – fritzmg Oct 12 '22 at 21:22