react实战之cnode—02视图划分及路由基本配置

最新推荐文章于 2020-12-19 20:52:00 发布
最新推荐文章于 2020-12-19 20:52:00 发布
阅读量126 收藏
点赞数
分类专栏： react实战之cnode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiaojsun/article/details/88733126
版权

1.视图划分

我们首先看一下cnode的官网

 经过分析之后发现可以划分为五个模块：首页，教程，文章详情，用户信息，关于。

所以我们再项目中添加以下代码

2.路由基本配置

首先配置好路由，编写以下代码

 

然后我们进入入口文件

接着修改App.js文件代码

 

运行项目的时候，报错了

 

 在网上找到了解决方案

https://segmentfault.com/q/1010000017794269/a-1020000017860037

我这么懒，当然是选择后者了，hahahhahahaha 

npm start跑是跑起来，但是不跳转。查看控制台

打开控制台，该有的都有了，下一节组件完善了看还存不存在这个问题吧。~~~~(>_<)~~~~ 

jiaojsun
关注
专栏目录
利用React 和ant-design 搭建cnode项目的随笔
aoshisen的博客
09-16 163
文章目录利用React 和ant-design 搭建cnode项目的随笔利用create-react-app搭建一个React项目 利用React 和ant-design 搭建cnode项目的随笔 利用create-react-app搭建一个React项目 利用npm包管理器创建React项目 npm init react-app cnode-hooks 进入项目然后删除多余的文件 #进入到主要的工作目录 cd cnode/src #删除多余的文件这里我为了方便给这个命令定义了一个别名（rmR
2021高频前端面试题汇总之React篇
weixin_59558923的博客
09-23 581
2021高频前端面试题汇总之React篇 React视频教程系列 React 实战：CNode视频教程 完整教程目录：点击查看 React经典教程-从入门到精通 完整教程目录：点击查看 最新最全前端毕设项目（小程序+VUE+Noed+React+uni app+Express+Mongodb） 完整教程目录：点击查看 2021前端React精品教程 完整教程目录：点击查看 1. React的事件和普通的HTML事件有什么不同？ 区别： 对于事件名称命名方式，原生事件为全小写，react 事件采用小驼峰；
cNode------路由设置以及项目基本框架搭建
程序媛的梦工厂
07-30 373
入口文件index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import registerServiceWorker from './registerServiceWorker';//缓存文件 import {BrowserRouter} from 're...
React全家桶实战-react版的cnode webapp
weixin_34304013的博客
10-03 157
前言 学习一门前端框架，不动手是不行的。所以当我学习react有一段时间时，就打算开始写一个react的个人项目,前后端一起写的话，比较耗时间，所以就选了提供了优质api的Cnode社区，感谢。（如果我参与的合作项目，产品选的技术栈是react的话，我也不用自己写个app了,Orz） 希望各位大爷给个star勒,就右上角轻轻一点，比心 传送门：源码地址 最近用mobx重构了一遍，也发了篇文章，传送...
react实现汉堡_React全家桶实战
weixin_39627390的博客
12-19 84
背景学习一门前端框架，不动手是不行的。所以当我学习react有一段时间时，就打算开始写一个react的个人项目,前后端一起写的话，比较耗时间，所以就选了提供了优质api的Cnode社区，感谢。(如果我参与的合作项目，产品选的技术栈是react的话，我也不用自己写个app了,Orz)希望各位大爷给个star勒,就右上角轻轻一点，比心传送门：源码地址Demodemo过程分析需求需求是做一个社区的web...
React 之 redux 的使用方法详解
zhuangvi的博客
07-19 512
React 之 redux 的使用方法介绍概念storereduceraction实现共享总结 介绍   首先，redux是基于Flux思想的一种状态共享的管理工具，在开发项目中，它不是必须的。但如果开发大型项目应用，我们往往考虑的是如何高效的管理组件数据，那么redux就是一种很不错的选择。就像 Dan Abramov 说的一样： Flux 架构就像眼镜：您自会知道什么时候需要它。   其次，安装： // 作用：创建store的 cnpm install redux -S // 作用：把redux和
手动搭建react环境
ccy607的博客
07-27 348
目标 ​ 1-从0-1待见React项目工程架构 ​ 2-学习React技术栈：React、React-Router、Mobx、Rudex ​ 3-硬件：win10 ​ 4-环境:node.js v12+ ​ 5-构建:webpack 初始化package.json npm init -y Webpack ​ 是前端工程的构建工具 ​ 是前端资源打包器 ​ 重点：入口、出口、loader、plugin、配置本地服务 安装： ​ 建议局部和全局都安装 cnpm i webpack -D
深入学习Vue SSR服务端渲染 用Nuxt.js打造CNode社区
weixin_33719619的博客
01-22 437
“学而不思则惘，思而不学则殆” 服务端渲染(SSR) SSR意为 server-side rendering（服务端渲染）,目的是为了解决单页面应用的SEO的问题。 服务器端渲染(SSR)和客户端渲染(CSR) 服务器端渲染(SSR) 浏览器先请求HTML文档，服务器端先将html页面(或页面组件)，生成为html字符串，再返回给浏览器，最后直接渲染到页面上。 客户端渲染(CSR) 浏览器先...
这应该是目前第三方cnode功能最完善最像的一个吧
weixin_34293246的博客
02-27 142
基于React实现的一个有点相似CNode社区网站 这应该是目前第三方CNode功能最全面最像的一个吧，如果不是麻烦贴上地址打我脸。 献给刚入门或还在学React的同学们, 有你们社区才会更强大！ 2018-02-27 源码github 在线预览 技术栈 "react": "^16.2.0", "react-dom": "^16.2.0", "react-router-dom": "^4..
react-cnode:用react写的cnode网站
04-27
在压缩包`react-cnode-master`中，我们可以看到项目的主要源代码和配置文件。深入研究这些文件，我们可以学习到如何组织一个React项目，如何集成Redux进行状态管理，以及如何使用React-Router进行路由设置。同时，这...
react-react写的cnode社区的一个app
08-14
**React技术栈构建CNode社区App** React是一个由Facebook维护的开源JavaScript库，用于构建用户界面，特别是单页面应用（SPA）。它采用组件化开发方式，使得代码结构清晰，易于复用和维护。CNode社区是中国最大的...
react-cnode：cnode论坛
02-04
采用react技术栈，通过Redux来管理页面状态，通过Router来设置页面路由...。 运行项目 git clone ... cd cnode npm install webpack-dev-server webpack -g (没有安装webpack的需要安装) npm install npm start...
react-cnode：基于webpack + react + react-router + redux + less + flex.css + ES6的React版本cnode社区
02-04
基于webpack + react + react-router + redux +更少+ flex.css + ES6的React版cnode社区 演示 下载 git clone https://github.com/lzxb/react-cnode.git cd react-cnode npm install (安装依赖模块) npm install...
React实战开发.pptx
08-04
该课程涵盖了 React 的基础知识和实战经验，包括 Webpack 配置、React 基础知识、路由配置、状态管理等。 一、Webpack 配置 * Webpack 是一个模块打包器，主要目标是将 JavaScript 文件打包在一起，用于在浏览器中...
薄板切割成型机_包括零件图_机械3D图可修改打包下载.rar
09-29
薄板切割成型机_包括零件图_机械3D图可修改打包下载.rar
非标自动化设备【C07】.zip
09-29
非标自动化设备【C07】.zip
SDR软件无线电开发板ZYNQ7020+AD9361 FPGA+STM32代码原理图资料 送fpga数字图像处理资料
09-29
SDR软件无线电开发板ZYNQ7020+AD9361 FPGA+STM32代码原理图资料 送fpga数字图像处理资料
【光伏发电】基于matlab光伏发电系统MPPT控制策略【含Matlab源码 期】.zip
最新发布
09-29
CSDN海神之光上传的全部代码均可运行，亲测可用，尽我所能，为你服务； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、物理应用 仿真：导航、地震、电磁、电路、电能、机械、工业控制、水位控制、直流电机、平面电磁波、管道瞬变流、刚度计算 光学：光栅、杨氏双缝、单缝、多缝、圆孔、矩孔衍射、夫琅禾费、干涉、拉盖尔高斯、光束、光波、涡旋 定位问题：chan、taylor、RSSI、music、卡尔曼滤波UWB 气动学：弹道、气体扩散、龙格库弹道 运动学：倒立摆、泊车 天体学：卫星轨道、姿态 船舶：控制、运动 电磁学：电场分布、电偶极子、永磁同步、变压器
react注册路由及配置路由链接
07-12
在 React 中，你可以使用第三方库 `react-router-dom` 来注册和配置路由链接。下面是一些基本的步骤： 1. 首先，确保你的项目已经安装了 `react-router-dom`。你可以使用 npm 或者 yarn 进行安装： ```bash npm ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值