基础安装

npx create-react-app my-app --template typescript

React使用create-react-app创建ts项目时会报错，按照改package.json文件方法降低版本，发现还是缺少配置文件。故采用vite方法安装。

vite安装

npm create vite@latest my-app --template react

执行完后，会有相关手动选项，↑ ↓选择React，再选择TypeScript。构建完成后，再进行后续操作，完整流程：

//后续操作
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>,
)

创建两个测试页面为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

创建路由配置文件

在src目录下创建router目录，在router目录下创建index.tsx文件，主要定义路由信息，内容如下：

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，就可以看到效果了。