score:-2
i believe i found a possible setup.
include the react-router routes on symfony's routes.yaml, all pointing to the same controller that generates react's root component.
all other routes, like for api calls, would be set up normally.
//config/routes.yaml
//all routes handled by pwa(react-router) pointing to same controller
home:
path: /
controller: app\controller\indexcontroller::index
account:
path: /account
controller: app\controller\indexcontroller::index
if somebody knows an alternative setup, please share.
score:4
the proper approach to this problem is setting route annotation like this:
/**
* @route("/{reactrouting}", name="index", priority="-1", defaults={"reactrouting": null}, requirements={"reactrouting"=".+"})
*/
public function index(): response
{
return $this->render('index.html.twig');
}
the magic here is to use "priority=-1" parameter. this allows symfony to use routing to find proper path for api methods, and only if no route was found, react router starts, looking for its route. if there is no react route as well you should handle it using some "notfound" component in react app.
with this approach you can still use spa, but also define all logic and use api in the same app.
score:12
a solution could be following.
the controller with route annotation, all routes will be handled by react with this annotation, no matter how many parameters the route might have:
namespace app\controller;
use sensio\bundle\frameworkextrabundle\configuration\template;
use symfony\bundle\frameworkbundle\controller\controller;
use symfony\component\routing\annotation\route;
class defaultcontroller extends controller
{
/**
* @template("default/index.html.twig")
* @route("/{reactrouting}", name="index", requirements={"reactrouting"=".+"}, defaults={"reactrouting": null})
*/
public function index()
{
return [];
}
}
if you have routes that shouldn't be handled by react, your annotation could exclude them like as follows - all routes that start with api will not be handled by react:
@route("/{reactrouting}", name="index", requirements={"reactrouting"="^(?!api).+"}, defaults={"reactrouting": null})
twig template, with root element:
{% extends 'base.html.twig' %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('build/js/app.css') }}">
{% endblock %}
{% block body %}
<div id="root"><div>
{% endblock %}
{% block javascripts %}
<script type="text/javascript" src="{{ asset('build/js/app.js') }}"></script>
{% endblock %}
react index file:
import react from 'react';
import reactdom from 'react-dom';
import {browserrouter, route, switch} from 'react-router-dom';
import home from "./containers/home";
import aboutus from "./containers/aboutus";
reactdom.render(
<browserrouter>
<switch>
<route path="/" component={home}/>
<route path="/about-us" component={aboutus}/>
</switch>
</browserrouter>,
document.getelementbyid('root'));
and my encore config:
var encore = require('@symfony/webpack-encore');
encore
// the project directory where compiled assets will be stored
.setoutputpath('public/build/')
// the public path used by the web server to access the previous directory
.setpublicpath('/build')
.cleanupoutputbeforebuild()
.enablesourcemaps(!encore.isproduction())
// uncomment to create hashed filenames (e.g. app.abc123.css)
// .enableversioning(encore.isproduction())
// uncomment to define the assets of the project
// .addentry('js/app', './assets/js/app.js')
// .addstyleentry('css/app', './assets/css/app.scss')
// uncomment if you use sass/scss files
// .enablesassloader()
// uncomment for legacy applications that require $/jquery as a global variable
// .autoprovidejquery()
.enablereactpreset()
.addentry('js/app', './react/index.js')
.configurebabel((config) => {
config.presets.push('stage-1');
})
;
module.exports = encore.getwebpackconfig();
Source: stackoverflow.com
Related Query
- Symfony 4 how to setup SPA ( single page app ) with React?
- How to implement the OAuth2 Authorization code grant with PKCE for a React single page application?
- How to setup react app with SCSS? (Errors)
- Serving a static html page from a single page react app with react router
- How to use Laravel routes alongside with React SPA single route in Laravel 8
- How can I show single data per page in react with javascript data file?
- React Single Page app with browserHistory possible?
- Adding underline to current page section in single page react app with Chakra.ui
- How to use visualforce page with lightning:container React in Lightning app builder?
- How to create multiple page app using react
- React JSX, how to render text with a single quote? Example <p>I've</p>
- How to setup Material-UI for React with Typescript?
- How to detect the device on React SSR App with Next.js?
- How to setup Axios interceptors with React Context properly?
- how to setup bootstrap 4 scss with react webpack
- How to run production react app in local with local back-end
- How to include "leaflet.css" in a React app with webpack?
- structure of a Backbone and React single page app
- How can I serve robots.txt on an SPA using React with Firebase hosting?
- How to reload a page (state) in a react app
- How to secure my react app api with csurf?
- How to navigate to another page with a smooth scroll on a specific id with react router and react scroll
- Has anyone been able to setup create react app with semantic-ui?
- How to bundle react app with rollup
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
- How do I configure my Nginx server to work with a React app in a subfolder?
- How to solve TypeScript error with axios response in React app
- how to use .env.qa or .env.staging with create react app
- 404 Error on refresh with SPA React Router app in GitHub Pages
- Navigation in a single page app with react.js
More Query from same tag
- Piping of RxJs Operators
- Expression Expected in React using Switch Statement
- How to handle null values when using availity-reactstrap-validation
- How to reset Redux Store using Redux-Toolkit
- ReactJS - setting an inline style equal to a property on state is not working. What's going on?
- How to get Component by dynamic testid using React Testing Library
- How can I rename index.html in a create-react-app project?
- how to revert (last clicked list item) back to its original color when any other item is clicked - react hooks
- Image not showing uo on webpage react
- Why setTimeout is returning number values
- React and useState(): multiple re-renders if initial state is a string
- How to list a data inside another list using map and filter in React CLI (Comments List and Reply List)
- How do I get the text value of an input using only function components in React?
- justify center antd form
- how to reduce tertiary conditionals
- React Component returning "TypeError: undefined has no properties"
- I'm getting error like this while creating react app
- Dynamic pages in Next.js won't link back to normal pages
- Formik - setting dynamic values for select box
- I'm trying to convert a base64 encoded string to a image on my react file
- How to convert timestamp in react.js?
- Can't display my data in a react-bootstrap-table
- start time big calendar react
- Unhandled Rejection (TypeError): Cannot read property 'image' of undefined
- Is it safe to render a react portal into another component DOM?
- Change disabled Material UI checkbox color or background color
- Why can't I add any value to the array in state?
- Big React Calender Date Format
- How to test a gatsby page containing components with multiple static queries?
- Are the parantheses necessary here in this React snippet?