搭建react项目并配置路由

一条龙服务：

1、全局安装create-react-app

npm install -g create-react-app

2、创建项目，安装依赖

create-react-app my-react-app

3、进入项目

cd my-react-app

4、启动项目

npm start

项目启动，只有一个页面，下面开始安装路由，创建属于自己的结构

打开项目，在src下，创建几个新的文件夹:

创建pages文件夹，放路由组件
创建router文件夹，放路由js
创建store文件夹，放redux
创建utils文件夹，放js工具类

项目目录如图:

项目目录

配置路由：

首先安装路由组件：

react-router-dom

npm install react-router-dom --save-dev

router.js如下:
代码:

import React, {Component} from 'react';
import {HashRouter,Switch,Route,Redirect} from "react-router-dom";//引入routerdomimport goodsDetails from '../components/goods/goodsDetails'//导入的组件
import manage from "../components/manage/manage";class Router extends Component {render() {return (<div><HashRouter><Switch><Route path="/goodsxq" component={goodsDetails}/><Route path="/" component={manage}/></Switch></HashRouter></div>);}
}export default Router;

index.js修改如下:

以上完成路由配置

最后，看下pages里

这里引用了immutable，需要安装一下，

npm install immutable

启动项目即可，自带热更新。

下边提供将src根路径替换成@的方法，效果如下图

方法：

安装react-app-rewired

npm install react-app-rewired --save-dev

跟路径下，添加config-overrides.js,如下
config-overrides.js
修改package.json,如下
packjson.json

ok，先到这里

搭建react项目并配置路由相关推荐

react安装_超全面详细一条龙教程！从零搭建React项目全家桶（上篇）
React是近几年来前端项目开发非常火的一个框架,其背景是Facebook团队的技术支持,市场占有率也很高.很多初学者纠结一开始是学react还是vue.个人觉得,有时间的话,最好两个都掌握一下.从学 ...
搭建react项目教程（二）
搭建react项目教程(二) 一:概述二:配置 1:配置依赖包 2:添加与后台交互的配置文件 3:封装API调用方法 4:与后台交互 5:启动项目验证接口一:概述 1:书接上文搭建react项目教 ...
2023新春版：看这篇大宝典就够了！从零搭建React项目全家桶
React是近年来前端开发领域非常热门的技术框架,其背景是Facebook团队的技术支持,在全球的前端开发市场上占有率很高.结合React丰富的社区资源,可以让项目开发如虎添翼.虽然React的学习门 ...
创建react项目 Linux,idea2018 快速搭建react项目指南
react与angular和vue是截止2018年为止主流的前端框架.对于一些新手来说,想快速入门react,应该是搭建一个react最初的模板项目,然后在项目中添加一些自己喜欢的组件作为练手..今天 ...
在react项目中配置alias-[webpack配置]
alias是webpack中用来配置路径别名的,在路径嵌套特别深的项目中,对于路径的导入非常友好. webpack中的alias create-react-app搭建的react项目中配置alias ...
搭建React项目，超简单教程
步骤前言一.安装create-react-app 二.使用步骤 1.创建项目 2.运行项目 3.文件目录总结前言最近公司闲的无聊,刚好之前学的React,至今还未搭建过一个React项目,借 ...
create-react-app 搭建react项目中的小坑
刚买的电脑安装了 16.3的 node版本然后就装了一个 create-react-app 脚手架然后就出了个问题就是搭建react项目的时候一直报错一直报错就很奇怪后来我换了个 ...
快速搭建react项目骨架（按需加载、redux、axios、项目级目录等等）
一.前言最近整理了一下项目骨架,顺便自定义了一个脚手架,方便日后使用.我会从头开始,步骤一步步写明白,如果还有不清楚的可以评论区留言.先大致介绍一下这个骨架,我们采用 create-react-ap ...
使用webpack5自己搭建react项目脚手架（手把手教，把手伸过来，好软~呸，好手）
问:目前前端最火的两大框架react和vue官方都有自己的成熟的cli脚手架,为什么还要自己搭建脚手架了? 答: 一.自己搭建脚手架可以根据自己公司的项目特征来决定使用哪些具体的插件或者编译方式,官方 ...

搭建react项目并配置路由

一条龙服务：

项目目录

搭建react项目并配置路由相关推荐

最新文章

热门文章