admin管理员组文章数量:1632643
文章目录
- 准备
- 开发
- UI框架
- 路由
- BrowerRouter
- HashRouter
- 入口
- End
准备
- 在
npx create-react-app project-name
后,可以直接运行,但是是最基础的一个类似于Hello World的存在。还需要自己的润色,那么就从icon开始吧,直接进入iconfont找素材了。感恩~ - 修改项目文件,只留下对应的
index.js
和App.js
,一个是作为项目入口,一个用于路由配置(React项目是单页面项目,所以需要配置路由处理多页面情况)
开发
项目准备好后就得进入正式的敲代码工作了。
UI框架
- Antd
将index作为首页进行开发,通过导航+列表的方式进行展示。那么如何进行展示呢,首次单独开发一个前端项目,这时候就想到UI框架了——Antd。这是蚂蚁开源的一个快速UI开发框架,通过各种UI组件能够快速搭建一个丰富的前端页面。因此采用Antd作为UI进行开发。具体的可以自行查看一下。
路由
鉴于React是单页面开发框架,所以在实际开发过程中出现了多页面的存在,一开始我天真的以为创建一个文件夹,url指向对应的文件夹或者jsx文件就好了,但是发现不是那么回事。npm执行后打开localhost:3000
主页—>index.js
内容
当我访问localhost:3000/detail
的时候提示not found。可是路径是有的啊,查询资料发现React只有一个页面。于是如何搞成多页面呢?路由。
通过路由代理可以将页面从单页面代理成多页面项目。React存在BrowerRouter和HashRouter。
BrowerRouter
BrowerRouter是将URL映射到不同页面,由React决定渲染哪一个页面。但是实际请求时会从服务器获取URL指向的内容,所以有时候需要配置不然请求会出现问题。新版使用方法
HashRouter
区别于BrowerRouter,HashRouter是通过URL的Hash值来跳转的,并且其URL里会存在#
字符,这样在#
字符后面的内容不会发送到服务器,譬如localhost:3000/#/detail
中的detail不会发送到服务器,服务器只会返回localhost:3000
的内容,最后还是由React路由进行具体的detail渲染。简单使用方法
入口
index.js
整个项目的入口
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
/**
* 整个页面入口
*/
ReactDOM.render(
<App />,
document.getElementById('root')
);
App.js
index.js
根据React规则渲染返回App组件,在App.js
中做路由管理,管理路由的跳转。
import React from 'react';
import Home from './home/home';
import UplaodPage from './upload/upload';
import Login from './login/login';
import Register from './register/register';
import Detail from './detail/detail';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
/**
* 整个页面管理路由
*/
export default function App () {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="upload" element={<UplaodPage />} />
<Route path="login" element={<Login />} />
<Route path="register" element={<Register />} />
<Route path="detail/:id" element={<Detail />} />
<Route
path="*"
element={
<main style={{ padding: "1rem" }}>
<p>There's nothing here!</p>
</main>
}
/>
</Routes >
</Router >
);
}
End
如此将页面路由写完了,如果需要新增页面,只需要在App.js
中新增页面路由就好(注册页面)。
序章指引:APP管理平台–环境准备(序)
版权声明:本文标题:APP管理平台--前端篇,项目入口和路由(一) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729142076a1187679.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论