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


相关推荐
six+seven1 分钟前
Node.js内置模块fs
前端·node.js
少莫千华2 分钟前
【HTML】CSS绘制奥运五环
前端·css·html
沛沛老爹2 分钟前
Web开发者转型AI安全核心:Agent Skills沙盒环境与威胁缓解实战
java·前端·人工智能·安全·rag·web转型升级
摘星编程7 分钟前
用React Native开发OpenHarmony应用:Apollo GraphQL订阅
react native·react.js·graphql
仰泳之鹅15 分钟前
【杂谈】C语言中的链接属性、声明周期以及static关键字
java·c语言·前端
2501_9403152619 分钟前
【无标题】(leetcode933)最近的请求次数
java·前端·javascript
每天吃饭的羊30 分钟前
LeetCode 第一题
前端
入门级前端开发32 分钟前
vue集成xlsl实现前端表格导入导出
前端·javascript·vue.js
小二·36 分钟前
Python Web 开发进阶实战:联邦学习平台 —— 在 Flask + Vue 中构建隐私保护的分布式 AI 训练系统
前端·python·flask
弓.长.37 分钟前
小白基础入门 React Native 鸿蒙跨平台开发:实现九宫格图片选择
react native·react.js·harmonyos