创建一个简单的react router demo

javascript 复制代码
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

// 1. 创建router实例对象并且配置路由对应关系
const router = createBrowserRouter([
  {
    path: '/login',
    element: <div>This is the login page.</div>
  },
  {
    path: '/article',
    element: <div>This is the article page.</div>
  }
])


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* 2. 路由绑定 */}
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();


相关推荐
我就是马云飞15 分钟前
我废了!大厂10年的我面了20家公司,面试官让我回去等通知!
android·前端·程序员
yizhiyang33 分钟前
ECharts实战:滑动缩放+选中背景高亮,打造高颜值统计图表
前端
猫山月37 分钟前
Flutter路由演进路线(2026)
前端·flutter
We་ct38 分钟前
LeetCode 322. 零钱兑换:动态规划入门实战
前端·算法·leetcode·typescript·动态规划
袋鱼不重41 分钟前
Hermes Agent 直连飞书机器人
前端·后端·ai编程
不务正业的前端学徒42 分钟前
Threejs,地图标签绘制,碰撞检测逻辑
前端
qq_12084093711 小时前
Three.js 工程向:GPU Overdraw 诊断与前端渲染优化
前端
纯爱掌门人1 小时前
聊聊 HarmonyOS 上的应用内通知授权弹窗
前端·harmonyos·arkts
Cdlblbq1 小时前
搜索会员中心 创作中心Vue2项目一键打包成桌面应用
前端·javascript·vue.js·electron
eason_fan1 小时前
前端避坑指南:一文吃透 npm 幽灵依赖(Phantom Dependency)
前端·前端工程化