创建一个简单的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();


相关推荐
前端一课10 分钟前
OpenClaw 项目全面架构分析报告
前端·人工智能
HelloReader23 分钟前
Tauri 的 Capabilities 权限管理系统
前端
喵爱吃鱼41 分钟前
关于我明明用了ref还是陷入React闭包陷阱
前端·react.js
an3174243 分钟前
解决 VSCode 中 ESLint 格式化不生效问题:新手也能看懂的配置指南
前端·javascript·vue.js
汪汪队长3 小时前
谷歌浏览器自定义油猴插件
前端
ZFSS3 小时前
SeeDance Tasks API 的对接和使用
前端·人工智能
睿智的仓鼠3 小时前
🦞OpenClaw 快速部署及使用指南
前端·人工智能
前端付豪3 小时前
Nest 项目小实践之图书增删改查
前端·node.js·nestjs
比特鹰3 小时前
手把手带你用Flutter手搓人生K线
前端·javascript·flutter
奔跑路上的Me3 小时前
前端导出 Word/Excel/PDF 文件
前端·javascript