最简单的一次React路由使用

首先使用 vite 新建项目

npm create vite@latest my-project --template react-ts

第一步:安装依赖

npm i react-router-dom

只需简单的react-router-dom依赖包即可, 当前的版本为6.23.0

第二步: 在src根目录定义路由文件router.tsx, 这个文件仅仅规定了路由的指向

import {
  createBrowserRouter,
} from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello</div>,
  },
  {
    path: "about",
    element: <div>About</div>,
  },
]);

export default router

第三步: 根组件中使用如下

import './App.css'
import {
  RouterProvider,
} from "react-router-dom";
import router from './router';
function App() {
  return (
    <RouterProvider router={router} />
  )
}

export default App