基礎安裝
npx create-react-app my-app --template typescript
React使用create-react-app創(chuàng)建ts項目時會報錯蚀同，按照改package.json文件方法降低版本脓豪，發(fā)現(xiàn)還是缺少配置文件瞧掺。故采用vite方法安裝亮垫。
vite安裝
npm create vite@latest my-app --template react
執(zhí)行完后眶拉，會有相關手動選項耍铜，↑ ↓選擇React畦戒，再選擇TypeScript檩赢。構建完成后搬卒，再進行后續(xù)操作瑟俭，完整流程：
//后續(xù)操作
cd my-app
npm install
npm run dev
成功后目錄結構是有配置信息.ts等文件的
image.png
安裝路由
npm install react-router-dom
安裝完成后package.json文件中查看路由版本為react-router-dom:7.1.2
"dependencies": {
"@types/react-router-dom": "^5.3.3",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^7.1.2"
},
配置路由v7
在main.ts中將createRoot修改為ReactDOM.createRoot，<App>增加BrowserRouter包裹契邀。完整如下摆寄。
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>,
)
創(chuàng)建兩個測試頁面為Home和Mine
- Home.tsx文件
const Home: React.FC = () =>{
return (
<div>
<h1>Home Page</h1>
</div>
)
}
export default Home
- Mine.tsx文件
const Mine: React.FC = () => {
return (
<div>
<p>mine 頁面</p>
</div>
)
}
export default Mine
創(chuàng)建路由配置文件
在src目錄下創(chuàng)建router目錄，在router目錄下創(chuàng)建index.tsx文件坯门，主要定義路由信息微饥，內(nèi)容如下：
import { RouteObject } from "react-router-dom";
import HomePage from "../pages/Home";
import MinePage from "../pages/Mine";
const routes: RouteObject[] = [
{
path: "/",
element: <HomePage />,
},
{
path: "/mine",
element: <MinePage />,
},
];
export default routes;
在App.tsx中引入路由配置文件
import './App.css';
import { useRoutes } from 'react-router-dom';
import routes from './router';
function App() {
const RouterPage = useRoutes(routes)
return (
<>
{RouterPage}
</>
);
}
export default App;
到這里路由基礎配置就完成了，運行npm run dev古戴，就可以看到效果了欠橘。
