Vite+TS的路由配置

1.安裝npm i [email protected] --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