I am using react-router-dom and I am guessing that this is causing the problem, but I have no clue where to even start looking or how to fix it. I also am getting errors like Warning: Did not expect server HTML to contain a <nav> in <div>.

As I stated, I'm not really sure where to look so if you think there is certain code that would be helpful please let me know and I will post it. Otherwise, I can post my code that I use to do SSR.

EDIT: Exact error: Warning: Prophrefdid not match. Server: /profile/5a073dc44cb45b00125e5c82 Client: profile/5a073dc44cb45b00125e5c82

I have checked the client and it has /profile/:id so not sure where it says there is not a /, as for the other error with the <nav> in <div> , I have a nav inside my header , but I'm not really sure how to go about fixing that.

import React from 'react';

import { renderToString } from 'react-dom/server';

import { StaticRouter } from 'react-router-dom';

import { Provider } from 'react-redux';

import { renderRoutes } from 'react-router-config';

import serialize from 'serialize-javascript';

import { Helmet } from 'react-helmet';

import { matchRoutes } from 'react-router-config';



import routes from './src/routes';

import createStore from './src/stores';



function handleRender(req, res) {

  let initial = {};



  if (req.vertexSession != null && req.vertexSession.user != null) {

    initial.user = { currentUser: req.vertexSession.user };

  }

  const store = createStore.configure(initial); // create Store in order to get data from redux



  const promises = matchRoutes(routes, req.path)

    .map(({ route, match }) => {

      // Matches the route and loads data if loadData function is there

      return route.loadData

        ? route.loadData(store)

        : route.loadDataWithMatch ? route.loadDataWithMatch(store, match) : null;

    })

    .map(promise => {

      if (promise) {

        return new Promise((resolve, reject) => {

          promise.then(resolve).catch(resolve); // lets all data load even if route fails

        });

      }

    });



  Promise.all(promises).then(() => {

    const context = {};

    if (context.url) {

      return res.redirect(301, context.url); // redirect for non auth users

    }



    if (context.notFound) {

      res.status(404); // set status to 404 for unknown route

    }

    const content = renderToString(

      <Provider store={store}>

        <StaticRouter location={req.path} context={context}>

          <div>{renderRoutes(routes)}</div>

        </StaticRouter>

      </Provider>

    );

    // console.log(store.getState());

    const initialState = serialize(store.getState());



    const helmet = Helmet.renderStatic();



    res.render('index', { content, initialState, helmet });

  });

}



module.exports = handleRender;