Vite+TS+React的路由配置全过程
作者：内向蛋挞
文章介绍了如何使用React Router DOM 6在React应用中实现路由配置,包括安装依赖、修改APP.tsx、创建路由文件、注意路由配置的细节（如路径和返回语句）以及创建页面
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.创建路由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- 上面注意我使用了别类名，使用前请注意更改路径
- 如果子级的内容需要在父级上面显示，我们可以配置路径默认为/
- 容易疏漏点，index.tsx文件后缀名错误，index.tsx里没有return返回
- 我们使用的是useRouters操控哦
5.创建页面
import { FC } from "react";
import { Outlet } from "react-router-dom";
const Home:FC=()=>{
return(
<>
<h1>页面</h1>
<Outlet/>
</>
)
}
export default Home总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。