【React-Router】路由快速上手,联想a560e（联想路由器r6830）

文件名：【React-Router】路由快速上手,联想a560e 【React-Router】路由快速上手 1. 创建路由开发环境 # 使用CRA创建项目npm create-react-app react-router-pro# 安装最新的ReactRouter包npm i react-router-dom 2. 快速开始 // index.jsimport 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';const router = createBrowserRouter([{path: '/login',element: <div>登录</div>},{path: '/article',element: <div>文章</div>}])const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<React.StrictMode><RouterProvider router={router} /></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-vitalsreportWebVitals(); 3. 抽象路由模块

// @/page/Article/index.jsconst Article = () => {return <div>文章页</div>}export default Article // @/router/index.jsimport Login from '../page/Login'import Article from '../page/Article'import { createBrowserRouter } from 'react-router-dom'const router = createBrowserRouter([{path: '/login',element: <Login></Login>},{path: '/article',element: <Article></Article>},{path: '/',element: <Login></Login>}])export default router // @/index.jsimport React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';import { RouterProvider } from 'react-router-dom';// 导入路由import router from './router';const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<React.StrictMode>{/* 路由绑定 */}<RouterProvider router={router} /></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-vitalsreportWebVitals();