Vite+TS+React的路由配置全過程
更新時間：2025年10月27日 09:20:57 作者：內(nèi)向蛋撻
文章介紹了如何使用React Router DOM 6在React應(yīng)用中實現(xiàn)路由配置,包括安裝依賴、修改APP.tsx、創(chuàng)建路由文件、注意路由配置的細(xì)節(jié)（如路徑和返回語句）以及創(chuàng)建頁面
1.安裝
npm i react-router-dom@6 --save-dev
2.更改APP.tsx
import './App.css'
import {BrowserRouter as Router ,Route} from 'react-router-dom'
import Routes from './router/index'
function App() {
return (
<Router>
<Routes/>
</Router>
)
}
export default App3.創(chuàng)建路由Router文件
4.Route文件下的Index
需要特別注意我們使用的后綴名是tsx
import Home from "@/pages/Home/home"
import Item from "@/pages/Item/item";
import { useRoutes } from "react-router-dom";
const Router=()=>{
return useRoutes(
[
{
path:"/",
element:<Home/>,
children:[
{
path:"/",
element:<Item/>,
}
]
}
]
)
}
export default Router- 上面注意我使用了別類名，使用前請注意更改路徑
- 如果子級的內(nèi)容需要在父級上面顯示，我們可以配置路徑默認(rèn)為/
- 容易疏漏點，index.tsx文件后綴名錯誤，index.tsx里沒有return返回
- 我們使用的是useRouters操控哦
5.創(chuàng)建頁面
import { FC } from "react";
import { Outlet } from "react-router-dom";
const Home:FC=()=>{
return(
<>
<h1>頁面</h1>
<Outlet/>
</>
)
}
export default Home總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue關(guān)于點擊詳情頁面keep-alive的緩存問題
這篇文章主要介紹了vue關(guān)于點擊詳情頁面keep-alive的緩存問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue 應(yīng)用中結(jié)合vux使用微信 jssdk的方法
今天小編就為大家分享一篇Vue 應(yīng)用中結(jié)合vux使用微信 jssdk的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue中保留字符串中的空格的解決方案，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
vue設(shè)置全局變量5種方法(讓你的數(shù)據(jù)無處不在)
這篇文章主要給大家介紹了關(guān)于vue設(shè)置全局變量的5種方法,通過設(shè)置的方法可以讓你的數(shù)據(jù)無處不在,在項目中經(jīng)常會復(fù)用一些變量和函數(shù),比如用戶的登錄token,用戶信息等,這時將它們設(shè)為全局的就顯得很重要了,需要的朋友可以參考下2023-11-11
Pinia是Vue的一個存儲庫,它允許你跨組件/頁面共享狀態(tài),下面這篇文章主要給大家介紹了關(guān)于vue3+pinia的快速入門使用,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vue 前端導(dǎo)出后端返回的excel文件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
使用Vue的slot插槽分發(fā)父組件內(nèi)容實現(xiàn)高度復(fù)用、更加靈活的組件(推薦)
這篇文章主要介紹了使用Vue的slot插槽分發(fā)父組件內(nèi)容實現(xiàn)高度復(fù)用、更加靈活的組件 ,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-05-05
Vue3響應(yīng)式對象是如何實現(xiàn)的(1)
這篇文章主要介紹了Vue3響應(yīng)式對象是如何實現(xiàn)的，文章圍繞主題展開詳細(xì)的內(nèi)容介紹具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
使用vue-router beforEach實現(xiàn)判斷用戶登錄跳轉(zhuǎn)路由篩選功能
這篇文章主要介紹了vue使用vue-router beforEach實現(xiàn)判斷用戶登錄跳轉(zhuǎn)路由篩選,本篇文章默認(rèn)您已經(jīng)會使用 webpack 或者 vue-cli 來進(jìn)行環(huán)境的搭建，并且具有一定的vue基礎(chǔ)。需要的朋友可以參考下2018-06-06
這篇文章主要介紹了詳解vuex之store源碼簡單解析，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06