• /src目录下新增一个pages目录,用于存放渲染页面的组件
  • 在/src/pages中新增一个Add.js文件
  • /src 下的index.js
    路由:
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { BrowserRouter, Route, Link } from 'react-router-dom';
    import AddPage from './pages/Add'; const App = () => (
    <BrowserRouter>
    <div>
    {
    /*
    exact: path 为 '/one' 的路由将不能匹配 '/one/two'
    strict: 对路径末尾斜杠的匹配
    */}
    <Route path="/" exact render={ () => <h1>Home</h1> } />
    <Route path="/user" component={ AddPage } />
    </div>
    </BrowserRouter>
    ) ReactDOM.render(<App/>, document.getElementById('app'));

react全家桶-路由的更多相关文章

  1. 使用react全家桶制作博客后台管理系统

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基于react全家桶(React.React-r ...

  2. 使用React全家桶搭建一个后台管理系统

    引子 学生时代为了掌握某个知识点会不断地做习题,做总结,步入岗位之后何尝不是一样呢?做业务就如同做习题,如果‘课后’适当地进行总结,必然更快地提升自己的水平. 由于公司采用的react+node的技术 ...

  3. react-music React全家桶项目,精品之作!

    React-Music 全家桶项目,精品之作! 一.简介 该项目是基于React全家桶开发的一个音乐播放器,技术栈采用:Webpack + React + React-redux + React-ro ...

  4. 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】:前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入

    使用react全家桶制作博客后台管理系统   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...

  5. webpack4 中的最新 React全家桶实战使用配置指南!

    最新React全家桶实战使用配置指南 这篇文档 是吕小明老师结合以往的项目经验 加上自己本身对react webpack redux理解写下的总结文档,总共耗时一周总结下来的,希望能对读者能够有收获, ...

  6. React全家桶+Material-ui构建的后台管理系统

    一.简介 一个使用React全家桶(react-router-dom,redux,redux-actions,redux-saga,reselect)+Material-ui构建的后来管理中心. 二. ...

  7. react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)

    react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redu ...

  8. vue全家桶和react全家桶

    vue全家桶:vue  +  vuex (状态管理)  + vue-router (路由) + vue-resource +axios +elementui react全家桶 : react + re ...

  9. 基于react全家桶+antd-design+webpack2+node+express+mongodb开发的前后台博客系统

    很久没更新博客,最近也有点忙,然后业余时间搞了一个比较完整基于react全家桶+antd-design+webpack2+node+express+mongodb开发的前后台博客系统的流程系统,希望对 ...

随机推荐

  1. Python全栈开发-Day5-常用模块学习

    本节大纲: 模块介绍 time &datetime模块 random os sys shutil shelve xml处理 pyyaml处理 configparser hashlib re正则 ...

  2. 第 2 章 容器架构 - 006 - 容器 What, Why, How

    What - 什么是容器? 容器: 容器是一种轻量级.可移植.自包含的软件打包技术,使应用程序可以在几乎任何地方以相同的方式运行. 开发人员在自己笔记本上创建并测试好的容器,无需任何修改就能够在生产系 ...

  3. 在shell终端操作oracle数据库的常用命令

    这里面是在一个项目中用到的操作oracle数据库的常用linux命令,因为当时无法用plsql远程连接,大部分操作都需要在命令行窗口进行,总结一下 第一种方式 (1)先切换至sqlplus [orac ...

  4. Java 反射(简单捋一下)

    有Student类,Person类,还有一个叫Class的类,这是反射的源头. 正常方式:通过完整的类名 > 通过new实例化 > 取得实例化对象 反射方式:实例化对象 > getC ...

  5. Vue音乐项目笔记(五)

    1.搜索列表的点击删除.删除全部的交互事件 https://blog.csdn.net/weixin_40814356/article/details/80496097 seach组件中放search ...

  6. linux指令统计日志出现的次数

    cat  XXX.log|grep ''|grep '条件'| wc -l   单个条件统计 cat  XXX.log|grep ''|grep '条件1'|grep '条件2'|grep '条件3' ...

  7. [转载]Python3编码问题详解

    原文:Python3的编码问题 Python3 最重要的一项改进之一就是解决了 Python2 中字符串与字符编码遗留下来的这个大坑.Python 编码为什么那么蛋疼?已经介绍过 Python2 字符 ...

  8. 【LeetCode】字符串匹配

    给定目标串 haystack 和模式串 needle ,返回 needle 在 haystack 中第一次出现的位置下标,若 needle 不是 haystack 的子串则返回 -1. 1. Brut ...

  9. set集合深浅拷贝以及知识补充

    一. 对之前的知识点进行补充. 1. str中的join方法. 把列表转换成字符串 li = ["李嘉诚", "麻花藤", "黄海峰", & ...

  10. windows启动/禁用telnet/IIS/ftp/IE等服务

    将需要启动的钩选,将要禁用的取消钩选确定即可:比如我这里要启动telnet客户端. 启动IIS将IIS可承载的Web核心和Internet两大项全钩选上即可,钩多了不影响功能.