feat(warn): warn when routes are not found (#279)

* test: add test for route not matched

* test: fix tests

* Apply suggestions from code review

Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>
* chore: code review suggestion

* chore: remove route for '//not-valid' to prevent future confusion

Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>

diff --git a/__tests__/warnings.spec.ts b/__tests__/warnings.spec.ts
index 23366b4cda06620d307f601878db65de0b72b6c3..61b4026d6135dadc2f35f7b68288b610b66e5bc1 100644 (file)
--- a/__tests__/warnings.spec.ts
+++ b/__tests__/warnings.spec.ts
@@ -25,8 +25,8 @@ describe('warnings', () => {
       history,
       routes: [{ path: '/:p', name: 'p', component }],
     })
-    router.resolve({ path: '/', params: { p: 'p' } })
-    expect('Path "/" was passed with params').toHaveBeenWarned()
+    router.resolve({ path: '/p', params: { p: 'p' } })
+    expect('Path "/p" was passed with params').toHaveBeenWarned()
   })
 
   it('does not warn when resolving a route with path, params and name', async () => {
@@ -130,7 +130,7 @@ describe('warnings', () => {
   it('should warn if multiple leading slashes with raw location', async () => {
     const router = createRouter({
       history: createMemoryHistory(),
-      routes: [{ path: '/foo', component }],
+      routes: [{ path: '/', component }],
     })
 
     await expect(router.push('//not-valid')).resolves.toBe(undefined)
@@ -140,7 +140,7 @@ describe('warnings', () => {
   it('should warn if multiple leading slashes with object location', async () => {
     const router = createRouter({
       history: createMemoryHistory(),
-      routes: [{ path: '/foo', component }],
+      routes: [{ path: '/', component }],
     })
 
     await expect(router.push({ path: '//not-valid' })).resolves.toBe(undefined)
@@ -174,4 +174,17 @@ describe('warnings', () => {
     await expect(router.push({ path: '/foo' })).resolves.toBe(undefined)
     expect('"/foo" is a Promise instead of a function').toHaveBeenWarned()
   })
+
+  it('warns if no route matched', async () => {
+    const router = createRouter({
+      history: createMemoryHistory(),
+      routes: [{ path: '/', name: 'a', component }],
+    })
+
+    await expect(router.push('/foo')).resolves.toBe(undefined)
+    expect(`No match found for location with path "/foo"`).toHaveBeenWarned()
+
+    await expect(router.push({ path: '/foo2' })).resolves.toBe(undefined)
+    expect(`No match found for location with path "/foo2"`).toHaveBeenWarned()
+  })
 })

diff --git a/src/router.ts b/src/router.ts
index 41aede494188e789c12bd2559971fb6df0261521..1358974bee1bb62797e46d85fc1504dc5dc9866d 100644 (file)
--- a/src/router.ts
+++ b/src/router.ts
@@ -244,6 +244,9 @@ export function createRouter(options: RouterOptions): Router {
           warn(
             `Location "${rawLocation}" resolved to "${href}". A resolved location cannot start with multiple slashes.`
           )
+        else if (!matchedRoute.matched.length) {
+          warn(`No match found for location with path "${rawLocation}"`)
+        }
       }
 
       return {
@@ -290,7 +293,6 @@ export function createRouter(options: RouterOptions): Router {
     }
 
     let matchedRoute = matcher.resolve(matcherLocation, currentLocation)
-
     const hash = encodeHash(rawLocation.hash || '')
 
     if (__DEV__ && hash && hash[0] !== '#') {
@@ -317,6 +319,13 @@ export function createRouter(options: RouterOptions): Router {
         warn(
           `Location "${rawLocation}" resolved to "${href}". A resolved location cannot start with multiple slashes.`
         )
+      else if (!matchedRoute.matched.length) {
+        warn(
+          `No match found for location with path "${
+            'path' in rawLocation ? rawLocation.path : rawLocation
+          }"`
+        )
+      }
     }
 
     return {