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

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -