title: Warning Prop `href` did not match. using react server-side-rendering
body: <p>I am using <code>react-router-dom</code> 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 <code>Warning: Did not expect server HTML to contain a &lt;nav&gt; in &lt;div&gt;</code>.</p>
  
  <p>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.</p>
  
  <p><strong>EDIT</strong>: Exact error: <code>Warning: Prop</code>href<code>did not match. Server: "/profile/5a073dc44cb45b00125e5c82" Client: "profile/5a073dc44cb45b00125e5c82"</code></p>
  
  <p>I have checked the client and it has <code>/profile/:id</code> so not sure where it says there is not a <code>/</code>, as for the other error with the <code>&lt;nav&gt;</code> in <code>&lt;div&gt;</code> , I have a <code>nav</code> inside my header , but I'm not really sure how to go about "fixing" that.</p>
  
  <pre><code>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 &amp;&amp; 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 }) =&gt; {
        // 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 =&gt; {
        if (promise) {
          return new Promise((resolve, reject) =&gt; {
            promise.then(resolve).catch(resolve); // lets all data load even if route fails
          });
        }
      });
  
    Promise.all(promises).then(() =&gt; {
      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(
        &lt;Provider store={store}&gt;
          &lt;StaticRouter location={req.path} context={context}&gt;
            &lt;div&gt;{renderRoutes(routes)}&lt;/div&gt;
          &lt;/StaticRouter&gt;
        &lt;/Provider&gt;
      );
      // console.log(store.getState());
      const initialState = serialize(store.getState());
  
      const helmet = Helmet.renderStatic();
  
      res.render('index', { content, initialState, helmet });
    });
  }
  
  module.exports = handleRender;
  </code></pre>