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


相关推荐
BillKu几秒前
node.js、npm相关知识
前端·npm·node.js
靠近彗星1 分钟前
基于 Vue + Django + MySQL 实现个人博客/CMS系统
前端·vue.js·python·mysql·django
予安灵8 分钟前
《白帽子讲 Web 安全》之服务端请求伪造(SSRF)深度剖析:从攻击到防御
前端·安全·web安全·网络安全·安全威胁分析·ssrf·服务端请求伪造
锋行天下17 分钟前
WebSocket 即时通讯前后端设计和基于token的鉴权
前端·后端
树上有只程序猿26 分钟前
前端方面移动端适配方法,减少兼容性问题
前端
学吧别真挂了31 分钟前
正则表达式从入门到飞升:覆盖90%前端场景的秘籍
前端·javascript·正则表达式
森叶35 分钟前
利用 Chrome devTools Source Override 实现JS逆向破解案例
前端·javascript·chrome devtools
welkin37 分钟前
KMP 个人理解
前端·算法
用户905614931522239 分钟前
Flutter开发入门总结
前端
市民中心的蟋蟀40 分钟前
第四章: 使用订阅来共享模块状态
前端·javascript·react.js