我整合模板reactjs在我的Symfony application.But，当我运行我的申请，我的应用程序会显示空白页。
请帮我！
我使用symfony4和反应用的WebPack安可JS。
这是我的layout.html.twig：
<!DOCTYPE html>
<html>
<body>
{% block body %}
<div id="root"></div>
{% endblock %}
{% block javascripts %}
<script type="text/javascript" src="/build/js/temp.js">
</script>
{% endblock %}
</body>
</html>
这是我的控制器：
<?php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
final class HomeController extends Controller
{
public function home(): Response
{
return $this->render('layout.html.twig');
}
}
我Webpack.config.js：
var Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('js/main', './assets/js/main.js')
.addEntry('js/temp', './assets/js/temp.js')
.addStyleEntry('css/util', './assets/css/util.css')
.addStyleEntry('css/material-dashboard-react', './assets/css/material-
dashboard-react.css')
.addStyleEntry('css/main', './assets/css/main.css')
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
.configureBabel(function(babelConfig) {
babelConfig.presets.push('env');
})
.enableReactPreset();
;
module.exports = Encore.getWebpackConfig();
我在整合资产/ JS / temps.js模板reactjs。在temp.js：
js
¦___temp.js
¦__components
¦__Containers
¦__routes
¦__variables
¦__views
¦__index.js
这是我的index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import { createBrowserHistory } from 'history';
import {
Router,
Route,
Switch
} from 'react-router-dom';
import '../../css/material-dashboard-react.css';
import indexRoutes from './routes/index.jsx';
const hist = createBrowserHistory();
ReactDOM.render(
<Router history={hist}>
<Switch>
{
indexRoutes.map((prop,key) => {
return (
<Route path={prop.path} component={prop.component} key=
{key}/>
);
})
}
</Switch>
</Router>
, document.getElementById('root'));
我想你应该试试这个：
同时，你应该从你的模板评估ReactDOM.render