title: Component not loading when route changed
body: <p>I am using Preact. I first tried preact-router then wouter for routing, but the problem still exists for one specific component. Here is the main entry where all routes defined:</p>
  
  <pre><code>import { h, Component } from 'preact';
  import { Route } from "wouter-preact";
  import Header from './partials/header';
  
  import Home from './pages/home';
  import News from './pages/news';
  import Article from './pages/article';
  
  export default class App extends Component {
  
      render() {
          return (
              &lt;div id="app"&gt;
                  &lt;Header /&gt;
                  &lt;Route path="/"&gt;&lt;Home /&gt; &lt;/Route&gt;  // working perfectly 
                  &lt;Route path="/a/:article"&gt;  &lt;Article /&gt; &lt;/Route&gt;  // not working
                  &lt;Route path="/n/:newspaper"&gt;&lt;News /&gt; &lt;/Route&gt;  // working
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>and here is the simplified second component which is working perfectly :</p>
  
  <pre><code>import { h, Fragment } from 'preact';
  import { Link, Route } from "wouter-preact";
  import useFetch from '../../utils/ajax';
  
  
  
  export default function News() {
      const url = window.location.pathname.split('/');
      const { data, loading } = useFetch(domain + '/api/v1/news/?newspaper=' + url[2]);
  
      return (
          &lt;Fragment&gt;
              {loading ? (
                  // loading indicator
              ) : (
                  &lt;main role="main"&gt;
                      &lt;div className="py-5"&gt;
                          &lt;div className="container"&gt;
                              &lt;div className="row"&gt;
  
                                  {data.results.map((nisha, index) =&gt; (
                                      &lt;div className="col-sm-6" key={index}&gt;
                                          &lt;div className="col-md-10" &gt;
                                              &lt;div className="card mb-2 shadow-lg" style={{ border: 'none' }} &gt;
                                                  &lt;Link href={'/a/' + nisha.slug}&gt;
                                                      &lt;img className="card-img-top" src={ nisha.cover_image } alt={ nisha.slug } /&gt;
                                                  &lt;/Link&gt;
                                                  &lt;div className="card-body"&gt;
  // body
                                                      &lt;div className="card-footer text-muted"&gt;
  // footer
  
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  ))}
  
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/main&gt;
              )}
          &lt;/Fragment&gt;
      );
  }
  </code></pre>
  
  <p>and finally the problematic component, when I click any link from previous component, browser url changing but the component is not loading (there is no debug console message in browser console). </p>
  
  <pre><code>export default function Article() {
      console.log("loaded");
      return (
          &lt;div className="main"&gt;
              &lt;div className="py-5"&gt;
                  &lt;div className="column"&gt;
                      &lt;div&gt;example article&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  );
  }
  </code></pre>