React 配置路由

安装依赖包

npm install react-router-dom

新建router文件夹

router --> index.tsx

import React from 'react'
import { RouterObject } from 'react-router-dom' // react提供的路由表类型
import Home from '@/views/home'

const routes: RouterObject[] = [
    {
        path: '/', // 路径
        element: <Home /> // 组件
    }
]

创建Home组件

views --> home --> index.tsx

import React from 'react'

const Home = () => <div>home</div>

export default Home

使用路由表

打开 App.tsx

import React from 'react'
import { useRoutes } from 'react-router-dom'
import routes from '@/router'

function App() {
  return <div className="App">{useRoutes(routes)}</div>
}

export default App

导入路由组件

打开 index.ts

import React from 'react'
import ReactDOM from 'react-dom/client'
import { HashRouter } from 'react-router-dom' // HashRouter hash模式 BrowserRouter history模式

import App from '@/App'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)

root.render(
  <HashRouter>
    <App />
  </HashRouter>
)