node.js - Browser history needs a DOM error when rendering react-router v4 and redux on the server -
i'm trying server-render content app uses react-router v4,redux, , express browser history needs dom
error in terminal. use react-router-config keep routes more organized. saw solution suggested 1 should create store on server, tried copypasting code store.js file server, didn't work out. can fix extremely unpleasant error?
routes.js
const routes = ( { component: app, routes: [ { path: '/', exact:true, component: home }, { path: '/login', exact:true, component: login }, { path: '/registration', exact:true, component: registration }, { path: '/person/:id', exact:true, component: userpage }, { path: '/mypage', exact:true, component: mypage }, { path: '/goodbye', exact:true, component: goodbye }, { path: '*', component: nomatch } ] } );
app.js
import react 'react'; import reactdom 'react-dom'; //import '../styles/app.scss' import {provider} 'react-redux'; import {grid} 'react-bootstrap'; import store './store/store'; import routes './routes'; import { createbrowserhistory } 'history'; import { synchistorywithstore } 'react-router-redux'; import { renderroutes } 'react-router-config'; import { browserrouter router} 'react-router-dom'; import { connectedrouter, switch } 'connected-react-router'; class app extends react.component { render() { return ( <provider store={store}> <grid fluid={true}> <connectedrouter history={createbrowserhistory()}> <switch> {renderroutes(routes)} </switch> </connectedrouter> </grid> </provider> ); } } const isbrowser = typeof window !== 'undefined'; if(isbrowser) { reactdom.render(<app/>, document.getelementbyid('root')); }
route handler:
import express 'express'; import react, {component} 'react'; import { rendertostring } 'react-dom/server'; import routes '../../js/routes'; import {staticrouter} 'react-router'; import { renderroutes } 'react-router-config'; import { provider } 'react-redux'; import store '../../js/store/store'; const router = express.router(); router.get('*',(req,res) => { let context = {}; const content = rendertostring( <provider store={store}> <staticrouter location={req.url} context={context}> {renderroutes(routes)} </staticrouter> </provider> ); if(context.status === 404) { res.status(404); } res.render('index', {title: 'express', data: store.getstate(), content }); });
Comments
Post a Comment