fix #173

demos/components/app.riot

@@ -1,12 +1,16 @@
 <app>
   <router>
     <nav>
+
       <a href="/hello">Hello</a>
       <a href="/user">User</a>
       <a href="/user/gianluca">Username</a>
       <a href="/user/gianluca/#anchor">Username with anchor</a>
       <a href="/goodbye">goodbye</a>
     </nav>
+    <route path="(.*)">
+      Every route :)
+    </route>
     <route path="/hello">hello</route>
     <route path="/user">user</route>
     <route path="/user/:username/([?#].*)?">

src/components/route-hoc.js

@@ -122,8 +122,14 @@ export const routeHoc = ({ slots, attributes }) => {
       this.callLifecycleProperty('onUnmounted', route)
     },
     onRoute(route) {
+      const prevRoute = this.state.route
       this.state.route = route
-      this.mountSlot()
+
+      // if this route component was already mounted we need to update it
+      if (prevRoute) this.slot.update({}, this.context)
+      // this route component was never mounted so we need to create its DOM
+      else this.mountSlot()
+
       // emulate the default browser anchor links behaviour
       if (route.hash) $(route.hash)?.[0].scrollIntoView()
     },

test/components.spec.js

@@ -3,6 +3,7 @@ import HistoryRouterApp from './components/history-router-app.riot'
 import NestedUpdates from './components/nested-updates.riot'
 import RecursiveUpdatesBugRouter from './components/recursive-updates-bug-router.riot'
 import StaticBasePath from './components/static-base-path.riot'
+import SameRouteMatches from './components/same-route-matches.riot'
 import { component } from 'riot'
 import { expect } from 'chai'
 import { router, defaults } from '../src/index.js'
@@ -83,4 +84,25 @@ describe('components', function () {
 
     comp.unmount()
   })
+
+  it('Routes matched multiple times do not render twice (bug 173) ', async function () {
+    const el = document.createElement('div')
+    const comp = component(SameRouteMatches)(el)
+
+    expect(comp.$$('p')).to.have.length(1)
+
+    router.push('/foo')
+
+    await sleep()
+
+    expect(comp.$$('p')).to.have.length(1)
+
+    router.push('/')
+
+    await sleep()
+
+    expect(comp.$$('p')).to.have.length(1)
+
+    comp.unmount()
+  })
 })

test/components/same-route-matches.riot

@@ -0,0 +1,21 @@
+<same-route-matches>
+  <router>
+    <route path="(.*)">
+      <p>{state.message}</p>
+    </route>
+  </router>
+
+  <script>
+    import { Router, Route } from '../../src/index.js'
+
+    export default {
+      components: {
+        Router,
+        Route,
+      },
+      state: {
+        message: 'hello',
+      }
+    }
+  </script>
+</same-route-matches>