React Server Side Rendering: Как увлажнять? - PullRequest
Новая
       8

React Server Side Rendering: Как увлажнять?

0 голосов
/ 19 апреля 2019

У меня есть это в моем server.tsx : 

...
const context = {msg: "hello world"}
const content = ReactDOMServer.renderToString(
    <Provider store={store}>

            <StaticRouter location={req.url} context={context}>
                <JssProvider registry={sheetsRegistry} generateClassName={generateClassName}>
                    <MuiThemeProvider theme={theme} sheetsManager={sheetsManager}>
                        <MuiPickersUtilsProvider utils={MomentUtils}>

                                <App />

                        </MuiPickersUtilsProvider>
                    </MuiThemeProvider>
                </JssProvider>
            </StaticRouter>

    </Provider>
)

const html = `
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">            
        <meta name="viewport" content="width=device-width, initial-scale=1.0">                        
        <link rel="icon" href="/favicon.ico" type="image/x-icon" />
        <style id="jss-server-side">${css}</style>            
    </head>
    <body>
        <div id="root" style="overflow-x: hidden; width: 100%; margin: 0;">${content}</div>
        <script src="/client_bundle.js" type="text/javascript"></script>
        <script type="text/javascript">
            window.__INITIAL_DATA__ = ${JSON.stringify(initialData).replace(
                /</g,
                '\\u003c'
            )};
        </script>
    </body>
    </html>
`

res.send(html)
...

И у меня это есть в моих rout.ts : 

...
 {
    name: 'Event Details',
    exact: true,
    path: '/events/:id',
    component: (props: any) => {
        if (typeof window != 'undefined' && window.document) {
            console.log('IS BROWSER', (window as any).alert, (window as any).__INITIAL_DATA__)
        } 

        return <h1>HELLO</h1>
    },
    loadData: (path: string) => {},
},
...

А это мой App.tsx : 

class App extends React.Component {
    render() {

        return (
            <React.Fragment> 
                <Switch>
                    {routes.map(({ path, exact, loginRequired, name, component: C }) => {
                        return <Route
                            key={path}
                            path={path}
                            exact={exact}
                            render={(props) => {
                                return (
                                    <Navbar>
                                        {<C {...props} />}
                                    </Navbar>
                                );
                            }} />
                    })}
                </Switch>
            </React.Fragment>
        )
    }
}

Моя проблема в том, что я не могу понять, как использовать исходные данные для увлажнения моего компонента! Эта строка: 

(window as any).__INITIAL_DATA__

Всегда печатает undefined, но, если я console.log в веб-инспекторе браузера, INITIAL_DATA не является неопределенным.

Не уверен, что я здесь делаю не так ... Любая помощь очень ценится

...