Я новичок в рендеринге на стороне сервера. Мой стек в основном: Webpack, React, React-Router, Redux, Babel. Создание пакета прекрасно работает. Но когда я открываю свой браузер, я получаю эту ошибку:
Инвариантное нарушение: истории браузера требуется DOM
Я не могу понять, что не так.
Вот мой server.js:
// create htmlTemplate to serve to client
const htmlTemplate = (template, initialState) => {
`<!DOCTYPE html>
<head>
<title>Universal Reacl</title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body><div id="root">${template}</div>
<script>window.__INITIAL_STATE__=${JSON.stringify(initialState)}</script>
<script src="./bundle.js" defer></script>
</body>
</html>
`
}
// listen client request => release server file
app.use((req,res) => {
// create store with appReducer inside
const store=configureStore();
const branch = matchRoutes(routes, req.url);
const promises = branch.map(({route}) => {
let fetchData = route.component.fetchData;
return fetchData instanceof Function ? fetchData(store) : Promise.resolve(null)
});
return Promise.all(promises).then((data) => {
let context = {};
const template = renderToString(
<Provider store={store}>
<StaticRouter location={req.url} context={context}>
{renderRoutes(routes)}
</StaticRouter>
</Provider>
);
if(context.status === 404) {
res.status(404);
}
// set initial component _ state
const initialState=store.getState()
// set html server's page
const HTML=htmlTemplate(template, initialState);
res.end(HTML);
});
})
export default app;
вот мой client.js:
// view
import React from 'react';
import {hydrate} from "react-dom" ;
// router
import { BrowserRouter } from 'react-router-dom'
import createBrowserHistory from 'history/createBrowserHistory'
import {AppRoute} from "../app/Router";
// data flow
import {configureStore} from "../app/store";
import {Provider} from 'react-redux';
const history = createMemoryHistory();
let initialState=window.__INITIAL_STATE__;
const store = configureStore(initialState);
const root=document.getElementById('root')
hydrate(
<Provider store={store}>
{() =>
<BrowserRouter history={history}>
<AppRoute/>
</BrowserRouter>
}
</Provider>,
root
)
Мне кажется, все отлично, выбирает данные, проталкивает маршруты и все, если у кого-то есть подсказка о том, что идет не так, было бы здорово,
Спасибо