在 React 应用里可以定义一个无匹配路由,这样用户访问的地址如果不匹配任何路由,就会显示这个无匹配路由。
先在浏览器试一下,访问一个在应用里并不存在的路由地址,比如 dashboard,现在会显示一个空白的页面,控制台上也会出现警告,提示 No routes matched location /dashboard,没有路由匹配 /dashboard 这个地址。
在项目里新建一个文件,放在 src/pages 里面,名字是 not-found.tsx,在文件里定义一个组件,名字是 NotFound,在组件里先用一下 useEffect ,提供一个回调,在回调里设置一下 document.title,把页面标题设置成 404
然后在组件的显示这里,一组 div 标签,里面包装的是一组 h1,文字是 404。
然后打开 app-router,在这组路由的最后,再定义一个路由,添加一个 Route,路由的 elemnt 设置成刚才定义的 NotFound 这个组件。然后设置一下这个路由的 path,把路由地址设置成 * ,意思是如果不匹配上面定义的这些路由,就匹配这个地址是 * 的这个路由。
在浏览器测试一下,现在访问在应用里不存在的路由地址的时候,在页面上就会显示 NotFound 这个组件提供的东西。