react + antdPro 从构建到运行 + 路由 + 组件 + 配置

不定期更新 ~
好久没用了,这次自己重新熟悉下;有不对的地方或错误,希望大家多指正

快速构建

使用 create-react-app 快速构建 React 开发环境

	 cnpm install -g create-react-app
	 create-react-app my-app
	 cd my-app/
	 npm start

到这里项目就已经启动了 : 默认会访问 http://localhost:3000/,这里不多阐述了

项目结构

这里src下新增几个文件夹,后面会一一阐述
components - 组件
containers - 页面
Router - 路由
utils - 封装工具类
store - react-redux
在这里插入图片描述在这里插入图片描述

路由配置

项目构建出来默认是没有路由文件的,这里需要我们自己手动建一个
router文件
需要注意的是到这里并不是已经完成了,我们在官网上看到的使用路由是 import { Router, Route, Link } from 'react-router'
但是实际上我们看到需要引用的是import { BrowserRouter as Router, Route } from "react-router-dom";
原因是因为 后者比前者多出了 <Link> <BrowserRouter> 这样的 DOM 类组件。
因此我们只需引用 react-router-dom 这个包就行了。
在这里插入图片描述


import React from 'react'
import {
    BrowserRouter as Router, Route } from "react-router-dom";
import Login from './../containers/login';
import Home from './../containers/home';

function router() {
   
    return (
        <Router>
            <Route path="/home" component={
   Home} />
            <Route path="/login" component={
   Login} />
        </Router>);
}

export default router;

然后需要到 src下index.js 引入路由 并挂载

import React from 'react';
import {
    render } from
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晴天有点孤单

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值