React模板创建及路由配置

ゝ一纸荒年。 2021-12-04 07:53 268阅读 0赞

# React模板创建及路由配置    #

## react模板创建 ##

参考react中文文档安装：http://www.css88.com/react/docs/portals.html

1、全局安装：

npm install -g create-react-app

2、创建react 模板

create-react-app 你的项目名

3、进入你的项目模板

cd 你的项目名

4、运行你的项目

npm start

打包发布：进入项目运行一下命令  
npm run build  
npm install -g serve  
serve build

模板创建完成

![20180517145158742][]

运行模板会自动弹出浏览器预览

![20180517150255926][]

# 配置路由 #

安装参考react路由官方文档：http://reacttraining.cn/web/guides/quick-start

1、安装路由模块

npm install react-router-dom

安装完成之后

导入模块

import React from 'react' 
       import { 
       BrowserRouter as Router, 
       Route, 
       Link 
       } from 'react-router-dom'

创建简单路由配置并使用

![20180517150350199][]

你会发现文件比较乱，然后我们建立文件夹进行分类 下图就是分类好的

![20180517150549469][]

将路由文件进行配置

在src 目录下创建router(路由)文件夹，进入router文件夹，创建index.js文件，打开并根据下图进行配置

![20180517150751424][]

[20180517145158742]: /images/20211204/f6a766d7546147d1865a2a96cf1a6d8e.png
[20180517150255926]: /images/20211204/63df317951714f91a2aa87880700da1e.png
[20180517150350199]: /images/20211204/dc9ac800082547bfad12d8ce6fd8a284.png
[20180517150549469]: /images/20211204/a6b80a2614c249e0a95647561f32cae3.png
[20180517150751424]: /images/20211204/3bb62a70c96d4e57b479a66afd5b6594.png

发表评论取消回复

表情：

评论列表（有 0 条评论，268人围观）

还没有评论，来说两句吧...

相关阅读

相关 React 路由配置

> 使用 react-router-dom 配置路由安装 react-router-dom 安装 yarn add react-router-do

偏执的太偏执、/ 2023年07月09日 06:29/ 0 赞/ 25 阅读

相关学习笔记——react路由配置

-------------------- > react中的路由配置是react项目中一个重要的功能。通过配置好的路由，我们可以实现不同组件的切换，进而实现单页面应用程序。

ゞ浴缸里的玫瑰/ 2022年11月22日 05:27/ 0 赞/ 146 阅读

相关 REACT_react路由配置

路由配置 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

向右看齐/ 2022年10月11日 00:56/ 0 赞/ 296 阅读

相关 React-router（11）路由配置

11、路由配置 [DEMO地址][DEMO] > 参考 9.routeConfigTable.js 简单来说，就是有一个对象，如下： const Route

﹏ヽ暗。殇╰゛Y/ 2022年05月30日 04:11/ 0 赞/ 308 阅读

相关 react-router路由配置

React路由传参，路由配置 const RouteConfig = [ { path: 'first',

亦凉/ 2022年05月24日 04:47/ 0 赞/ 351 阅读

相关 React路由配置使用

Router包安装: 安装包还是要打开命令行工具，使用npm来进行安装。 npm install --save react-router react-route

àì夳堔傛蜴生んèń/ 2022年01月07日 17:39/ 0 赞/ 276 阅读

相关 React 路由配置

转载https://blog.csdn.net/We\_jia/article/details/89353729\%E4%B8%80%E3%80%81%E8%B7%AF%E7%

╰半橙微兮°/ 2021年12月11日 10:49/ 0 赞/ 485 阅读

相关 React模板创建及路由配置

React模板创建及路由配置 react模板创建参考react中文文档安装：http://www.css88.com/react/docs/portals.

ゝ一纸荒年。/ 2021年12月04日 07:53/ 0 赞/ 269 阅读

相关 react 路由安装配置方法

1.安装react-router-dom npm install react-router-dom --save-dev 2.创建一个router.js 引入路由

ゝ一纸荒年。/ 2021年07月25日 01:33/ 0 赞/ 657 阅读

相关 react 路由Link配置

1、Link的to属性 (1)放置路由路径 (2)放置对象,且为规定格式 {pathname:"/xx",search:'?键值对

╰+哭是因爲堅強的太久メ/ 2021年07月24日 23:25/ 0 赞/ 586 阅读