<p dir="auto">I am using <code class="notranslate">withRouter</code> HoC as described in this <a href="https://github.com/zeit/next.js/blob/master/errors/url-deprecated.md">snippet</a>, however, I am still getting the error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" utils.js:26 Warning: the 'url' property is deprecated. https://err.sh/next.js/url-deprecated"><pre class="notranslate"><code class="notranslate"> utils.js:26 Warning: the 'url' property is deprecated. https://err.sh/next.js/url-deprecated
</code></pre></div>




<ul dir="auto">
<li>[x ] I have searched the <a href="https://github.com/zeit/next.js/issues?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">Code executes without the deprecation warning.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">The error mentioned above appears.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Import <code class="notranslate">withRouter</code> to your component</li>
<li>Refer any field from <code class="notranslate">this.props.router</code></li>
<li>Export your component wrapped in <code class="notranslate">withRouter</code> HoC</li>
<li>When component is rendered, the deprecation error appears in console</li>
</ol>
<h2 dir="auto">Context</h2>


<p dir="auto">I am implementing Navigation component that is aware of the current route (to highlight the NavItem).</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>6.0.0</td>
</tr>
<tr>
<td>node</td>
<td>9.11.1</td>
</tr>
<tr>
<td>OS</td>
<td>OSX 10.13.4</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome Version 66.0.3359.139</td>
</tr>
</tbody>
</table>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Works without problem.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Errors with "material-ui": "^1.0.0-beta.44" and "next": "^6.0.0" tried a lot of configuration with .babelrc  doesn't work as expected.<br>
When I'm using material-ui component <code class="notranslate">MuiThemeProvider</code>  and refresh page using browser refresh not all component are rendered properly and in console there is next warning:<br>
<code class="notranslate">Warning: Prop 'className' did not match. Server: "MuiTypography-root-246 MuiTypography-title-252 MuiTypography-colorInherit-265 PageComponent-flex-207" Client: "MuiTypography-root-44 MuiTypography-title-50 MuiTypography-colorInherit-63 PageComponent-flex-5"</code></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Page component wich is container for whole app:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react'
import PropTypes from 'prop-types'
import Head from 'next/head'
import Document from 'next/document'
import NavigationBottom from './navigation/bottom'
import { MuiThemeProvider, createMuiTheme, withStyles } from 'material-ui/styles'
import { Hidden } from 'material-ui'

import AppBar from 'material-ui/AppBar'
import Toolbar from 'material-ui/Toolbar'
import Typography from 'material-ui/Typography'
import IconButton from 'material-ui/IconButton'
import Link from 'next/link'
import Drawer from 'material-ui/Drawer'
import Divider from 'material-ui/Divider'
import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
import { inherits } from 'util'

import { MenuList, MenuItem } from 'material-ui/Menu';
import PeopleIcon from '@material-ui/icons/People'
import FavoriteIcon from '@material-ui/icons/Favorite'
import Help from '@material-ui/icons/Help'
import blue from 'material-ui/colors/blue';

const muiTheme = createMuiTheme({
  palette: {
    primary: {
      main: '#32be9e'
    }
  }
})

const drawerWidth = 210

const styles = theme =&gt; ({
  root: {
    flexGrow: 1,
    zIndex: 1,
    overflow: 'hidden',
    position: 'relative',
    display: 'flex',
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    color: '#32be9e',
    backgroundColor: 'white'
  },
  drawerPaper: {
    position: 'relative',
    width: drawerWidth,
  },
  content: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.default,
    padding: theme.spacing.unit * 3,
    minWidth: 0, // So the Typography noWrap works
  },
  flex: {
    flex: 1
  },
  toolbar: theme.mixins.toolbar,
});

class PageComponent extends Document {
  static propTypes = {
    isServer: PropTypes.bool,
    title: PropTypes.string.isRequired,
    children: PropTypes.element.isRequired,
    classes: PropTypes.object.isRequired
  }

  static defaultProps = {
    navigationVisible: true
  }

  computedHeadTitle() {
    return this.props.title ? `${this.props.title} | Cureety` : 'Cureety'
  }

  render() {
    let { classes, navigationVisible } = this.props
    return (
      &lt;MuiThemeProvider theme={createMuiTheme({
        palette: {
          primary: blue,
        },
      })} &gt;
        &lt;Head&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css?family=Roboto:300,400,500&quot; /&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0, width=device-width&quot; /&gt;
          &lt;title&gt;{this.computedHeadTitle()}&lt;/title&gt;
          &lt;link rel='stylesheet' href='/static/custom.css' /&gt;
        &lt;/Head&gt;
        &lt;div className={classes.root}&gt;
          &lt;AppBar position=&quot;absolute&quot; className={classes.appBar}&gt;
            &lt;Toolbar&gt;
              &lt;Typography variant=&quot;title&quot; color=&quot;inherit&quot; className={classes.flex}&gt;
                &lt;Link href=&quot;/&quot;&gt;
                  &lt;a className=&quot;link-styleless&quot;&gt;Cureety&lt;/a&gt;
                &lt;/Link&gt;
              &lt;/Typography&gt;
              &lt;Link href=&quot;/help&quot;&gt;
                &lt;IconButton
                  aria-haspopup=&quot;true&quot;
                  color=&quot;inherit&quot;
                  tooltip=&quot;Assistance&quot;&gt;
                  &lt;Help /&gt;
                &lt;/IconButton&gt;
              &lt;/Link&gt;
            &lt;/Toolbar&gt;
          &lt;/AppBar&gt;
          &lt;Hidden only={['xs']}&gt;
            {navigationVisible &gt; 0 &amp;&amp;
              &lt;Drawer
                variant=&quot;permanent&quot;
                classes={{
                  paper: classes.drawerPaper,
                }}&gt;
                &lt;div className={classes.toolbar} /&gt;
                &lt;MenuList&gt;
                  &lt;Link href=&quot;/suivi&quot;&gt;
                    &lt;MenuItem&gt;
                      &lt;ListItemIcon&gt;
                        &lt;FavoriteIcon /&gt;
                      &lt;/ListItemIcon&gt;
                      &lt;ListItemText inset primary=&quot;Mon suivi&quot; /&gt;
                    &lt;/MenuItem&gt;
                  &lt;/Link&gt;
                  &lt;Link href=&quot;/profile&quot;&gt;
                    &lt;MenuItem&gt;
                      &lt;ListItemIcon&gt;
                        &lt;PeopleIcon /&gt;
                      &lt;/ListItemIcon&gt;
                      &lt;ListItemText inset primary=&quot;Mon profile&quot; /&gt;
                    &lt;/MenuItem&gt;
                  &lt;/Link&gt;
                &lt;/MenuList&gt;
                &lt;Divider /&gt;
                &lt;List&gt;&lt;/List&gt;
              &lt;/Drawer&gt;
            }
          &lt;/Hidden&gt;

          &lt;main className={classes.content}&gt;
            &lt;div className={classes.toolbar} /&gt;
            &lt;Typography noWrap component=&quot;div&quot;&gt;
              &lt;div&gt;
                {this.props.children}
              &lt;/div&gt;
            &lt;/Typography&gt;
          &lt;/main&gt;
          {navigationVisible &gt; 0 &amp;&amp;
            &lt;Hidden only={['sm', 'md', 'lg', 'xl']}&gt;
              &lt;NavigationBottom /&gt;
            &lt;/Hidden&gt;
          }
        &lt;/div&gt;
      &lt;/MuiThemeProvider&gt;
    )
  }
}

const Page = withStyles(styles)(PageComponent)

export default Page"><pre class="notranslate"><code class="notranslate">import React from 'react'
import PropTypes from 'prop-types'
import Head from 'next/head'
import Document from 'next/document'
import NavigationBottom from './navigation/bottom'
import { MuiThemeProvider, createMuiTheme, withStyles } from 'material-ui/styles'
import { Hidden } from 'material-ui'

import AppBar from 'material-ui/AppBar'
import Toolbar from 'material-ui/Toolbar'
import Typography from 'material-ui/Typography'
import IconButton from 'material-ui/IconButton'
import Link from 'next/link'
import Drawer from 'material-ui/Drawer'
import Divider from 'material-ui/Divider'
import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
import { inherits } from 'util'

import { MenuList, MenuItem } from 'material-ui/Menu';
import PeopleIcon from '@material-ui/icons/People'
import FavoriteIcon from '@material-ui/icons/Favorite'
import Help from '@material-ui/icons/Help'
import blue from 'material-ui/colors/blue';

const muiTheme = createMuiTheme({
  palette: {
    primary: {
      main: '#32be9e'
    }
  }
})

const drawerWidth = 210

const styles = theme =&gt; ({
  root: {
    flexGrow: 1,
    zIndex: 1,
    overflow: 'hidden',
    position: 'relative',
    display: 'flex',
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    color: '#32be9e',
    backgroundColor: 'white'
  },
  drawerPaper: {
    position: 'relative',
    width: drawerWidth,
  },
  content: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.default,
    padding: theme.spacing.unit * 3,
    minWidth: 0, // So the Typography noWrap works
  },
  flex: {
    flex: 1
  },
  toolbar: theme.mixins.toolbar,
});

class PageComponent extends Document {
  static propTypes = {
    isServer: PropTypes.bool,
    title: PropTypes.string.isRequired,
    children: PropTypes.element.isRequired,
    classes: PropTypes.object.isRequired
  }

  static defaultProps = {
    navigationVisible: true
  }

  computedHeadTitle() {
    return this.props.title ? `${this.props.title} | Cureety` : 'Cureety'
  }

  render() {
    let { classes, navigationVisible } = this.props
    return (
      &lt;MuiThemeProvider theme={createMuiTheme({
        palette: {
          primary: blue,
        },
      })} &gt;
        &lt;Head&gt;
          &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" /&gt;
          &lt;meta name="viewport" content="initial-scale=1.0, width=device-width" /&gt;
          &lt;title&gt;{this.computedHeadTitle()}&lt;/title&gt;
          &lt;link rel='stylesheet' href='/static/custom.css' /&gt;
        &lt;/Head&gt;
        &lt;div className={classes.root}&gt;
          &lt;AppBar position="absolute" className={classes.appBar}&gt;
            &lt;Toolbar&gt;
              &lt;Typography variant="title" color="inherit" className={classes.flex}&gt;
                &lt;Link href="/"&gt;
                  &lt;a className="link-styleless"&gt;Cureety&lt;/a&gt;
                &lt;/Link&gt;
              &lt;/Typography&gt;
              &lt;Link href="/help"&gt;
                &lt;IconButton
                  aria-haspopup="true"
                  color="inherit"
                  tooltip="Assistance"&gt;
                  &lt;Help /&gt;
                &lt;/IconButton&gt;
              &lt;/Link&gt;
            &lt;/Toolbar&gt;
          &lt;/AppBar&gt;
          &lt;Hidden only={['xs']}&gt;
            {navigationVisible &gt; 0 &amp;&amp;
              &lt;Drawer
                variant="permanent"
                classes={{
                  paper: classes.drawerPaper,
                }}&gt;
                &lt;div className={classes.toolbar} /&gt;
                &lt;MenuList&gt;
                  &lt;Link href="/suivi"&gt;
                    &lt;MenuItem&gt;
                      &lt;ListItemIcon&gt;
                        &lt;FavoriteIcon /&gt;
                      &lt;/ListItemIcon&gt;
                      &lt;ListItemText inset primary="Mon suivi" /&gt;
                    &lt;/MenuItem&gt;
                  &lt;/Link&gt;
                  &lt;Link href="/profile"&gt;
                    &lt;MenuItem&gt;
                      &lt;ListItemIcon&gt;
                        &lt;PeopleIcon /&gt;
                      &lt;/ListItemIcon&gt;
                      &lt;ListItemText inset primary="Mon profile" /&gt;
                    &lt;/MenuItem&gt;
                  &lt;/Link&gt;
                &lt;/MenuList&gt;
                &lt;Divider /&gt;
                &lt;List&gt;&lt;/List&gt;
              &lt;/Drawer&gt;
            }
          &lt;/Hidden&gt;

          &lt;main className={classes.content}&gt;
            &lt;div className={classes.toolbar} /&gt;
            &lt;Typography noWrap component="div"&gt;
              &lt;div&gt;
                {this.props.children}
              &lt;/div&gt;
            &lt;/Typography&gt;
          &lt;/main&gt;
          {navigationVisible &gt; 0 &amp;&amp;
            &lt;Hidden only={['sm', 'md', 'lg', 'xl']}&gt;
              &lt;NavigationBottom /&gt;
            &lt;/Hidden&gt;
          }
        &lt;/div&gt;
      &lt;/MuiThemeProvider&gt;
    )
  }
}

const Page = withStyles(styles)(PageComponent)

export default Page
</code></pre></div>
<h2 dir="auto">Context</h2>


<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>^6.0.0</td>
</tr>
<tr>
<td>node</td>
<td>v8.9.3</td>
</tr>
<tr>
<td>OS</td>
<td>Windows 10</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome  Version 66.0.3359.139 (Build officiel) (64 bits)</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">Connected issue, said to move question to another issue: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="304069782" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/3983" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/3983/hovercard" href="https://github.com/vercel/next.js/issues/3983">#3983</a></p>