react中如何寫404頁面


 

   前言

    首先我們來思考一個問題,為什么要有404頁面?

  1:優化SEO,讓蜘蛛爬蟲,也就是搜索引擎能更好的爬到

  2:優化用戶體驗,當用戶輸錯訪問網站網址或網絡故障時不顯示空白頁,而顯示404頁面

 

  react中只需要在路由中加上這行代碼即可

  

 

  下圖為路由5的寫法,<Route>需要嵌套在<Switch>中,連接組件用這種方式 <你的組件名 />

  把紅色框代碼放在最后,也就是最后一個Route要為紅色框中的代碼

  path:通配符 * 號會匹配所有路由,並將此配置放在最后,當前面的路由都匹配不上時,就會匹配到 * 號,

     然后會指向<NotFound  />組件,並顯示該組件內容,也就是404頁面的內容

   exact:幫助我們精確定位,正確顯示跳轉后對應組件內容,不加該屬性會出現僅URL改變,但頁面內容並未隨之改變

  

 

  路由5之前的寫法,<Route>不需要嵌套在<Switch>中,連接組件方式為 Component = { 你的組件名 }

   

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM