Vite+TS+React的路由配置

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 App

3.创建路由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