【无标题】

一:创建项目

超全面详细一条龙教程!从零搭建React项目全家桶(上篇) - 知乎

1.创建一个文件夹,shift+鼠标右键选择在此处打开powershell

2.为了加速npm下载速度,先把npm设置为淘宝镜像地址。

npm config set registry http://registry.npm.taobao.org/

3.执行下面的npm安装react,那么基础的项目就搭建好了

npx create-react-app react-app

4.使用下列npm运行项目

npm start

二:精简项目

删除例如App.css、App.test.js、index.css、logo.svg、reportWebvitals.js、setupTests.js等文件,

保留核心index.js、App.js;优化成下图

三.创建文件并安装路由

1.基本文件格式

2.安装路由 npm install react-router-dom

  1. router文件夹下index.js的模板
javascript 复制代码
// 引入组件
import Login from "../views/login";
// 注册路由数组
const routes = [
  {
    // 首页默认是/
    path: "/",
    element: <Login></Login>,
  }
];
// 导出
export default routes;
  1. views文件夹下面的页面的基本模板结构
javascript 复制代码
import React from "react";
export default function login() {
  return <div>这是子页面</div>;
}

5.配置 App.js 使用路由 : 在 App.js 中使用 useRoutes 来注册路由:

javascript 复制代码
import { useRoutes } from 'react-router-dom';
import routes from './router';
 
function App() {
  return (
    <div>
      {/* 注册路由 */}
      {useRoutes(routes)}
    </div>
  );
}
 
export default App;

6.配置 index.js 引入 HashRouter : 在 index.js 中,使用 HashRouter 包裹 App 组件,配置路由:

javascript 复制代码
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { HashRouter } from 'react-router-dom'; // 导入 HashRouter
 
const root = ReactDOM.createRoot(document.getElementById('root'));
 
root.render(
  <HashRouter>
    <App />
  </HashRouter>
);

7.index.html替换为

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1"
/>
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using createreact-app" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
相关推荐
坫鹏加油站1 小时前
【ArcGIS】如何编辑图层的属性表
arcgis
wanzhong23331 天前
ArcGIS学习-18 实战-降雨量空间分布插值分析
学习·arcgis
GIS工具-gistools20212 天前
ArcGIS Excalibur 的新功能
人工智能·arcgis
2301_794333912 天前
React入门 | React 新手入门与常用库和工具
arcgis
GIS之家4 天前
vue3+arcgisAPI4示例:绘图工具动态修改样式导出GeoJSON(附源码下载)
arcgis·gis·webgis
@高蕊4 天前
光伏项目无人机踏勘--如何使用无人机自动航线规划APP
arcgis·无人机
wanzhong23334 天前
ArcGIS答疑-如何消除两张栅格图片中间的黑缝
arcgis
杨超越luckly5 天前
HTML应用指南:利用GET请求获取全国招商银行网点位置信息
前端·arcgis·信息可视化·html·银行网点
枝上棉蛮5 天前
ArcGIS与GISBox对比:中小企业GIS工具的高门槛与零门槛之选
arcgis·格式转换·osgb·gisbox·服务分发·免费发布·场景编辑
小彭努力中7 天前
164.在 Vue3 中使用 OpenLayers 加载 Esri 地图(多种形式)
开发语言·前端·javascript·vue.js·arcgis