<h1 dir="auto">Bug report</h1>
<p dir="auto">Unable to navigate to another route when using <code class="notranslate">@zeit/next-sass</code> in version <code class="notranslate">8.0.4</code>.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">On clicking the link from index page, it doesn't route to about page(when using <code class="notranslate">@zeit/next-sass</code>). But after removing (<code class="notranslate">@zeit/next-sass</code>), it works as expected.</p>
<p dir="auto">This unusual behaviour happens on client side. When going directly to the about page, it works but still navigation does not work on client side.</p>
<p dir="auto"><code class="notranslate">/pages/index.js</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import Link from &quot;next/link&quot;;
const Index = () =&gt; (
  &lt;div&gt;
    &lt;Link href=&quot;/about&quot;&gt;
      &lt;a&gt;About Page&lt;/a&gt;
    &lt;/Link&gt;
    &lt;p&gt;Hello Next.js&lt;/p&gt;
  &lt;/div&gt;
);

export default Index;"><pre class="notranslate"><code class="notranslate">import Link from "next/link";
const Index = () =&gt; (
  &lt;div&gt;
    &lt;Link href="/about"&gt;
      &lt;a&gt;About Page&lt;/a&gt;
    &lt;/Link&gt;
    &lt;p&gt;Hello Next.js&lt;/p&gt;
  &lt;/div&gt;
);

export default Index;
</code></pre></div>
<p dir="auto"><code class="notranslate">/pages/about.js</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import &quot;../styles/about.scss&quot;;
function About() {
  return (
    &lt;div&gt;
      &lt;p className=&quot;about&quot;&gt;This is the about page&lt;/p&gt;
    &lt;/div&gt;
  );
}
export default About;"><pre class="notranslate"><code class="notranslate">import "../styles/about.scss";
function About() {
  return (
    &lt;div&gt;
      &lt;p className="about"&gt;This is the about page&lt;/p&gt;
    &lt;/div&gt;
  );
}
export default About;
</code></pre></div>
<p dir="auto"><code class="notranslate">styles/about.scss</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$font-size: 50px;

.about {
    font-size: $font-size;
}"><pre class="notranslate"><code class="notranslate">$font-size: 50px;

.about {
    font-size: $font-size;
}
</code></pre></div>
<p dir="auto"><code class="notranslate">next.config.js</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const withSass = require(&quot;@zeit/next-sass&quot;);

module.exports = withSass();"><pre class="notranslate"><code class="notranslate">const withSass = require("@zeit/next-sass");

module.exports = withSass();
</code></pre></div>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">It should be able to route to about page from index page on client side.</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: macOS</li>
<li>Version of Next.js: 8.0.4</li>
<li>Node version : v10.13.0</li>
</ul>
<h1 dir="auto">Feature request</h1>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto">one issue I've run across is a simple routing solution for dynamic path segments.</p>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">I'd like to have a function like this that next.js provides to me</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function buildAsPath(pathname, params = {}) {
  let nextPath = pathname;
  const query = JSON.parse(JSON.stringify(params));
  for (const key in query) {
    nextPath = nextPath.replace(
      new RegExp(`\\[(${key})\\]`, 'g'),
      (_match, p1) =&gt; {
        const value = query[p1];
        delete query[p1];
        return value;
      }
    );
  }

  return { pathname: nextPath, query };
}"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-en">buildAsPath</span><span class="pl-kos">(</span><span class="pl-s1">pathname</span><span class="pl-kos">,</span> <span class="pl-s1">params</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">let</span> <span class="pl-s1">nextPath</span> <span class="pl-c1">=</span> <span class="pl-s1">pathname</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">query</span> <span class="pl-c1">=</span> <span class="pl-c1">JSON</span><span class="pl-kos">.</span><span class="pl-en">parse</span><span class="pl-kos">(</span><span class="pl-c1">JSON</span><span class="pl-kos">.</span><span class="pl-en">stringify</span><span class="pl-kos">(</span><span class="pl-s1">params</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">const</span> <span class="pl-s1">key</span> <span class="pl-k">in</span> <span class="pl-s1">query</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">nextPath</span> <span class="pl-c1">=</span> <span class="pl-s1">nextPath</span><span class="pl-kos">.</span><span class="pl-en">replace</span><span class="pl-kos">(</span>
      <span class="pl-k">new</span> <span class="pl-v">RegExp</span><span class="pl-kos">(</span><span class="pl-s">`\\[(<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">key</span><span class="pl-kos">}</span></span>)\\]`</span><span class="pl-kos">,</span> <span class="pl-s">'g'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-kos">(</span><span class="pl-s1">_match</span><span class="pl-kos">,</span> <span class="pl-s1">p1</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-k">const</span> <span class="pl-s1">value</span> <span class="pl-c1">=</span> <span class="pl-s1">query</span><span class="pl-kos">[</span><span class="pl-s1">p1</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
        <span class="pl-k">delete</span> <span class="pl-s1">query</span><span class="pl-kos">[</span><span class="pl-s1">p1</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
        <span class="pl-k">return</span> <span class="pl-s1">value</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">return</span> <span class="pl-kos">{</span> <span class="pl-c1">pathname</span>: <span class="pl-s1">nextPath</span><span class="pl-kos">,</span> query <span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">so when I have a URL like <code class="notranslate">/posts/[id]/comments/[commentId]</code> I can just do</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="router.push(router.pathname, buildAsPath(router.pathname, {
  id: router.query.id,
  commentId: comment.id
}))"><pre class="notranslate"><span class="pl-s1">router</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-s1">router</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span><span class="pl-kos">,</span> <span class="pl-en">buildAsPath</span><span class="pl-kos">(</span><span class="pl-s1">router</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
  <span class="pl-c1">id</span>: <span class="pl-s1">router</span><span class="pl-kos">.</span><span class="pl-c1">query</span><span class="pl-kos">.</span><span class="pl-c1">id</span><span class="pl-kos">,</span>
  <span class="pl-c1">commentId</span>: <span class="pl-s1">comment</span><span class="pl-kos">.</span><span class="pl-c1">id</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">)</span></pre></div>
<h2 dir="auto">Describe alternatives you've considered</h2>
<p dir="auto">What I started with:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function buildPathname(pathname, { unit, city, state, role }) {
  switch (pathname) {
    case '/jobs/roles/[role]/units/[unit]':
      if (typeof unit === 'string' &amp;&amp; unit.length !== 0) {
        return '/jobs/roles/[role]/units/[unit]';
      } else if (typeof city === 'string' &amp;&amp; typeof state === 'string') {
        return '/jobs/roles/[role]/locations/[state]/[city]';
      } else if (typeof state === 'string') {
        return '/jobs/roles/[role]/locations/[state]';
      } else if (typeof role === 'string') {
        return '/jobs/roles/[role]';
      }
    case '/jobs/roles/[role]/locations/[state]': // eslint-disable-line no-fallthrough
    case '/jobs/roles/[role]/locations/[state]/[city]':
      if (typeof city === 'string' &amp;&amp; typeof state === 'string') {
        return '/jobs/roles/[role]/locations/[state]/[city]';
      } else if (typeof state === 'string') {
        return '/jobs/roles/[role]/locations/[state]';
      } else if (typeof unit === 'string' &amp;&amp; unit.length !== 0) {
        return '/jobs/roles/[role]/units/[unit]';
      } else if (typeof role === 'string') {
        return '/jobs/roles/[role]';
      }
    // eslint-disable-line no-fallthrough
    default:
      throw new TypeError('invalid arguments for buildPathname()');
  }
}
function buildAsPathname(nextPathname, { unit, city, state, role }) {
  switch (nextPathname) {
    case '/jobs/roles/[role]/units/[unit]': {
      const query = {};
      if (typeof city === 'string') {
        query.city = city;
      }
      if (typeof state === 'string') {
        query.state = state;
      }

      return {
        pathname: `/jobs/roles/${role}/units/${unit}`,
        query,
      };
    }
    case '/jobs/roles/[role]/locations/[state]': {
      const query = {};

      if (typeof unit === 'string' &amp;&amp; unit.length !== 0) {
        query.unit = unit;
      }
      return {
        pathname: `'/jobs/roles/${role}/locations/${state}'`,
        query,
      };
    }
    case '/jobs/roles/[role]/locations/[state]/[city]': {
      const query = {};
      if (typeof unit === 'string' &amp;&amp; unit.length !== 0) {
        query.unit = unit;
      }
      return {
        pathname: `'/jobs/roles/${role}/locations/${state}/${city}'`,
        query,
      };
    }
    case '/jobs/roles/[role]': {
      const query = {};
      if (typeof unit === 'string' &amp;&amp; unit.length !== 0) {
        query.unit = unit;
      }

      return {
        pathname: `/jobs/roles/${role}`,
        query,
      };
    }
    default:
      throw new TypeError('invalid arguments for buildAsPathname()');
  }
}

function navigate(props, { role, unit, state, city }) {
  if (typeof role === 'string') {
    role = role.toLowerCase();
  }

  if (typeof city === 'string') {
    city = titleCaseToKebabCase(city);
  }

  if (typeof state === 'string') {
    state = state.toLowerCase();
  }

  if (typeof unit === 'string') {
    unit = unit.toLowerCase();
  }

  if (
    role !== props.router.query.role ||
    unit !== props.router.query.unit ||
    state !== props.router.query.state ||
    city !== props.router.query.city
  ) {
    const pathname = buildPathname(props.router.pathname, {
      role,
      unit,
      state,
      city,
    });

    const asPath = buildAsPathname(pathname, {
      role,
      unit,
      state,
      city,
    });

    props.router.push(pathname, asPath);
  }
}"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-en">buildPathname</span><span class="pl-kos">(</span><span class="pl-s1">pathname</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> unit<span class="pl-kos">,</span> city<span class="pl-kos">,</span> state<span class="pl-kos">,</span> role <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">switch</span> <span class="pl-kos">(</span><span class="pl-s1">pathname</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">case</span> <span class="pl-s">'/jobs/roles/[role]/units/[unit]'</span>:
      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">unit</span> <span class="pl-c1">===</span> <span class="pl-s">'string'</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">unit</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">!==</span> <span class="pl-c1">0</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-s">'/jobs/roles/[role]/units/[unit]'</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">city</span> <span class="pl-c1">===</span> <span class="pl-s">'string'</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-k">typeof</span> <span class="pl-s1">state</span> <span class="pl-c1">===</span> <span class="pl-s">'string'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-s">'/jobs/roles/[role]/locations/[state]/[city]'</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">state</span> <span class="pl-c1">===</span> <span class="pl-s">'string'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-s">'/jobs/roles/[role]/locations/[state]'</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">role</span> <span class="pl-c1">===</span> <span class="pl-s">'string'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-s">'/jobs/roles/[role]'</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span>
    <span class="pl-k">case</span> <span class="pl-s">'/jobs/roles/[role]/locations/[state]'</span>: <span class="pl-c">// eslint-disable-line no-fallthrough</span>
    <span class="pl-k">case</span> <span class="pl-s">'/jobs/roles/[role]/locations/[state]/[city]'</span>:
      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">city</span> <span class="pl-c1">===</span> <span class="pl-s">'string'</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-k">typeof</span> <span class="pl-s1">state</span> <span class="pl-c1">===</span> <span class="pl-s">'string'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-s">'/jobs/roles/[role]/locations/[state]/[city]'</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">state</span> <span class="pl-c1">===</span> <span class="pl-s">'string'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-s">'/jobs/roles/[role]/locations/[state]'</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">unit</span> <span class="pl-c1">===</span> <span class="pl-s">'string'</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">unit</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">!==</span> <span class="pl-c1">0</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-s">'/jobs/roles/[role]/units/[unit]'</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">role</span> <span class="pl-c1">===</span> <span class="pl-s">'string'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-s">'/jobs/roles/[role]'</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span>
    <span class="pl-c">// eslint-disable-line no-fallthrough</span>
    <span class="pl-k">default</span>:
      <span class="pl-k">throw</span> <span class="pl-k">new</span> <span class="pl-v">TypeError</span><span class="pl-kos">(</span><span class="pl-s">'invalid arguments for buildPathname()'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>
<span class="pl-k">function</span> <span class="pl-en">buildAsPathname</span><span class="pl-kos">(</span><span class="pl-s1">nextPathname</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> unit<span class="pl-kos">,</span> city<span class="pl-kos">,</span> state<span class="pl-kos">,</span> role <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">switch</span> <span class="pl-kos">(</span><span class="pl-s1">nextPathname</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">case</span> <span class="pl-s">'/jobs/roles/[role]/units/[unit]'</span>: <span class="pl-kos">{</span>
      <span class="pl-k">const</span> <span class="pl-s1">query</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">;</span>
      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">city</span> <span class="pl-c1">===</span> <span class="pl-s">'string'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">query</span><span class="pl-kos">.</span><span class="pl-c1">city</span> <span class="pl-c1">=</span> <span class="pl-s1">city</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span>
      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">state</span> <span class="pl-c1">===</span> <span class="pl-s">'string'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">query</span><span class="pl-kos">.</span><span class="pl-c1">state</span> <span class="pl-c1">=</span> <span class="pl-s1">state</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span>

      <span class="pl-k">return</span> <span class="pl-kos">{</span>
        <span class="pl-c1">pathname</span>: <span class="pl-s">`/jobs/roles/<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">role</span><span class="pl-kos">}</span></span>/units/<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">unit</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">,</span>
        query<span class="pl-kos">,</span>
      <span class="pl-kos">}</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
    <span class="pl-k">case</span> <span class="pl-s">'/jobs/roles/[role]/locations/[state]'</span>: <span class="pl-kos">{</span>
      <span class="pl-k">const</span> <span class="pl-s1">query</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">;</span>

      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">unit</span> <span class="pl-c1">===</span> <span class="pl-s">'string'</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">unit</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">!==</span> <span class="pl-c1">0</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">query</span><span class="pl-kos">.</span><span class="pl-c1">unit</span> <span class="pl-c1">=</span> <span class="pl-s1">unit</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span>
      <span class="pl-k">return</span> <span class="pl-kos">{</span>
        <span class="pl-c1">pathname</span>: <span class="pl-s">`'/jobs/roles/<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">role</span><span class="pl-kos">}</span></span>/locations/<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">state</span><span class="pl-kos">}</span></span>'`</span><span class="pl-kos">,</span>
        query<span class="pl-kos">,</span>
      <span class="pl-kos">}</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
    <span class="pl-k">case</span> <span class="pl-s">'/jobs/roles/[role]/locations/[state]/[city]'</span>: <span class="pl-kos">{</span>
      <span class="pl-k">const</span> <span class="pl-s1">query</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">;</span>
      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">unit</span> <span class="pl-c1">===</span> <span class="pl-s">'string'</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">unit</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">!==</span> <span class="pl-c1">0</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">query</span><span class="pl-kos">.</span><span class="pl-c1">unit</span> <span class="pl-c1">=</span> <span class="pl-s1">unit</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span>
      <span class="pl-k">return</span> <span class="pl-kos">{</span>
        <span class="pl-c1">pathname</span>: <span class="pl-s">`'/jobs/roles/<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">role</span><span class="pl-kos">}</span></span>/locations/<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">state</span><span class="pl-kos">}</span></span>/<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">city</span><span class="pl-kos">}</span></span>'`</span><span class="pl-kos">,</span>
        query<span class="pl-kos">,</span>
      <span class="pl-kos">}</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
    <span class="pl-k">case</span> <span class="pl-s">'/jobs/roles/[role]'</span>: <span class="pl-kos">{</span>
      <span class="pl-k">const</span> <span class="pl-s1">query</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">;</span>
      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">unit</span> <span class="pl-c1">===</span> <span class="pl-s">'string'</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">unit</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">!==</span> <span class="pl-c1">0</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">query</span><span class="pl-kos">.</span><span class="pl-c1">unit</span> <span class="pl-c1">=</span> <span class="pl-s1">unit</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span>

      <span class="pl-k">return</span> <span class="pl-kos">{</span>
        <span class="pl-c1">pathname</span>: <span class="pl-s">`/jobs/roles/<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">role</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">,</span>
        query<span class="pl-kos">,</span>
      <span class="pl-kos">}</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
    <span class="pl-k">default</span>:
      <span class="pl-k">throw</span> <span class="pl-k">new</span> <span class="pl-v">TypeError</span><span class="pl-kos">(</span><span class="pl-s">'invalid arguments for buildAsPathname()'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">function</span> <span class="pl-en">navigate</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> role<span class="pl-kos">,</span> unit<span class="pl-kos">,</span> state<span class="pl-kos">,</span> city <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">role</span> <span class="pl-c1">===</span> <span class="pl-s">'string'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">role</span> <span class="pl-c1">=</span> <span class="pl-s1">role</span><span class="pl-kos">.</span><span class="pl-en">toLowerCase</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">city</span> <span class="pl-c1">===</span> <span class="pl-s">'string'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">city</span> <span class="pl-c1">=</span> <span class="pl-en">titleCaseToKebabCase</span><span class="pl-kos">(</span><span class="pl-s1">city</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">state</span> <span class="pl-c1">===</span> <span class="pl-s">'string'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">state</span> <span class="pl-c1">=</span> <span class="pl-s1">state</span><span class="pl-kos">.</span><span class="pl-en">toLowerCase</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">unit</span> <span class="pl-c1">===</span> <span class="pl-s">'string'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">unit</span> <span class="pl-c1">=</span> <span class="pl-s1">unit</span><span class="pl-kos">.</span><span class="pl-en">toLowerCase</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">if</span> <span class="pl-kos">(</span>
    <span class="pl-s1">role</span> <span class="pl-c1">!==</span> <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">router</span><span class="pl-kos">.</span><span class="pl-c1">query</span><span class="pl-kos">.</span><span class="pl-c1">role</span> <span class="pl-c1">||</span>
    <span class="pl-s1">unit</span> <span class="pl-c1">!==</span> <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">router</span><span class="pl-kos">.</span><span class="pl-c1">query</span><span class="pl-kos">.</span><span class="pl-c1">unit</span> <span class="pl-c1">||</span>
    <span class="pl-s1">state</span> <span class="pl-c1">!==</span> <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">router</span><span class="pl-kos">.</span><span class="pl-c1">query</span><span class="pl-kos">.</span><span class="pl-c1">state</span> <span class="pl-c1">||</span>
    <span class="pl-s1">city</span> <span class="pl-c1">!==</span> <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">router</span><span class="pl-kos">.</span><span class="pl-c1">query</span><span class="pl-kos">.</span><span class="pl-c1">city</span>
  <span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">pathname</span> <span class="pl-c1">=</span> <span class="pl-en">buildPathname</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">router</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
      role<span class="pl-kos">,</span>
      unit<span class="pl-kos">,</span>
      state<span class="pl-kos">,</span>
      city<span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">const</span> <span class="pl-s1">asPath</span> <span class="pl-c1">=</span> <span class="pl-en">buildAsPathname</span><span class="pl-kos">(</span><span class="pl-s1">pathname</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
      role<span class="pl-kos">,</span>
      unit<span class="pl-kos">,</span>
      state<span class="pl-kos">,</span>
      city<span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">router</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-s1">pathname</span><span class="pl-kos">,</span> <span class="pl-s1">asPath</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<h2 dir="auto">Additional context</h2>
<p dir="auto">Add any other context or screenshots about the feature request here.</p>