1

我正在尝试使用 Laravel、React 和 Fluxible 启动一个应用程序。

我有：

入口.js

import React from "react";
import ReactDOM from "react-dom";
import { Router } from "react-router-dom";
import { AppContainer } from "react-hot-loader";
import FluxibleComponent from 'fluxible-addons-react/FluxibleComponent';
import createBrowserHistory from "history/createBrowserHistory";
import App from "./containers/App";
import fluxibleApp from "./fluxibleApp";

import "./prototypes";

const history = createBrowserHistory();

const render = (context, Component) => {
    ReactDOM.render(
        <AppContainer>
            <FluxibleComponent context={context.getComponentContext()}>
                <Router history={history}>
                    <Component />
                </Router>
            </FluxibleComponent>
        </AppContainer>,
        document.getElementById("root")
    );
};

let rehydratedContext = null;

fluxibleApp.rehydrate(window.app_dehydrated, function(err, context) {
    rehydratedContext = context;
    render(rehydratedContext, App);
});

/containers/App.js

import React, { Component } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import { Helmet } from "react-helmet";
import config from "../config";
import classNames from "classnames";

import SomeScreen from "./SomeScreen/SomeScreen";

export default class App extends Component {

    render(){
        return (
            <div>
                <Helmet {...config.app.head} />
                <BrowserRouter>
                    <div>
                        <Route path='/some-screen' component={SomeScreen} />
                    </div>
                </BrowserRouter>
            </div>
        )
    }
}

webpack.mix.js

let mix = require('laravel-mix');

mix.react('resources/assets/js/Entry.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
    .sourceMaps()
    .version();

主页.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
    </head>
    <body>
    <div id="root">Gets replaced</div>
    <script src="{{asset('js/app.js')}}"></script>
    </body>
</html>

但是什么都没有被渲染，我哪里出错了？

4

0 回答 0