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


相关推荐
一念永恒@8 分钟前
vue2新增删除
前端·javascript·vue.js
岸边的风26 分钟前
vue中mixin的理解,有那些使用场景?
前端·javascript·vue.js
时间sk41 分钟前
CSS——6. 导入样式
前端·css
玩具工匠1 小时前
字玩FontPlayer开发笔记9 Tauri2打包应用
前端·笔记
骆驼Lara1 小时前
Vue3.5 企业级管理系统实战(一):项目初始搭建与配置
前端·vue.js
黑云压城After1 小时前
uniapp web-view调整修改高度设置
前端·javascript·uni-app
问老大1 小时前
uniapp实现在card卡片组件内为图片添加长按保存、识别二维码等功能
前端·javascript·uni-app
她说她一如既往的爱我1 小时前
如何写一个uniapp自定义tarbar导航栏?
前端·vue.js·windows·uni-app
大大艺术家1 小时前
安装vue脚手架出现的一系列问题
前端·javascript·vue.js
UOrb1 小时前
WebGL - 初相识 - 缓冲区
前端·webgl