React Router简单Demo
简介
react router是使用react的时候首选的一个路由工具。
安装
react router包含react-router,react-router-dom和react-router-native这三个包,分别是路由核心组件和浏览器端组件和native端组件,所以我们需要安装react-router-dom
npm install --save react-router-dom
安装后就可以直接使用了
https://codepen.io/pshrmn/pen/YZXZqM?editors=1010
这里有一个只有一个js文件的demo,我是根据这个demo来改成用多个文件的demo的
正式开始
index.js配置
首先你需要在index.js里面引入BrowserRouter组件,这个组件是作为路由器的选择。
你的选择可以有两种BrowserRouter和HashRouter
当存在服务区来管理动态请求时,需要使用组件,而被用于静态网站。
引入后index.js为
import React from 'react';
import ReactDOM from 'react-dom';
import './assets/css/index.css';
import App from './pages/App';
import registerServiceWorker from './registerServiceWorker';
import {BrowserRouter} from 'react-router-dom'
ReactDOM.render((
<BrowserRouter>
<App/>
</BrowserRouter>
), document.getElementById('root'));
registerServiceWorker();
添加被路由的组件
添加两个测试用的组件内容随意 test和test2
import React, { Component } from 'react';
import '../assets/css/App.css';
class App extends Component {
render() {
return (
<div className="App">
<p className="App-intro">
this is test
</p>
</div>
);
}
}
export default App;
添加路由的组件router.js
先上代码吧,很简单
import React from 'react';
import test2 from './pages/Test2.js'
import test from './pages/Test.js'
import {Switch,Route} from 'react-router-dom'
const router = () => (
<Switch>
<Route exact path='/test' component={test}/>
<Route path='/test2' component={test2}/>
</Switch>
)
export default router;
首先引入react,不引入的话不会识别jsx语法
然后引入两个测试组件和react-router-dom
其中所有的路由需要用Switch来包括
然后所有的路由需要用Route组件来写
path属性是路由地址,component是地址的组件
这些就可以定义我们路由跳转的页面了
app.js中设置跳转
先看代码
import React, { Component } from 'react';
import {Link} from 'react-router-dom'
import Router from './../router.js'
class App extends Component {
render() {
return (
<div>
<li><Link to='/test'>test</Link></li>
<li><Link to='/test2'>test2</Link></li>
<Router></Router>
</div>
);
}
}
export default App;
引入react-router-dom的Link组件,然后引入我们编写好的Router
然后用Link去跳转到对应的路由地址
然后在Router组件里面展示当前路由的页面
Router是用来显示对于路由的页面的
总结
这里只是简单的路由的使用
总结一下就是只需要在入口处定义路由类型,然后设置路由的对应组件,然后再跳转到对应的路由就可以显示不同路由的组件了
参考资料
https://segmentfault.com/a/1190000010174260#articleHeader16
React Router简单Demo的更多相关文章
- React Router 用法
React Router 用法 一.DEMO import React from "react"; import { HashRouter as Router, Route, Li ...
- [Web 前端] 你不知道的 React Router 4
cp from https://segmentfault.com/a/1190000010718620 几个月前,React Router 4 发布,我能清晰地感觉到来自 Twitter 大家对新版本 ...
- react router路由传参
今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...
- 从 React Router 谈谈路由的那些事
React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的. Re ...
- React Router 4.0 体验
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...
- angular实现了一个简单demo,angular-weibo-favorites
前面必须说一段 帮客户做了一个过渡期的项目,唯一的要求就是速度,我只是会点儿基础的php,于是就用tp帮客户做了这个项目.最近和客户架构沟通,后期想把项目重新做一下,就用现在最流行的技术,暂时想的使用 ...
- React Router基础使用
React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...
- 关于react router 4 的小实践
详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react ...
- React Router 4.x 开发,这些雷区我们都帮你踩过了
前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...
随机推荐
- The Preliminary Contest for ICPC Asia Xuzhou 2019 徐州网络赛 XKC's basketball team
XKC , the captain of the basketball team , is directing a train of nn team members. He makes all mem ...
- go 模板详说
模板是我们常用的手段用于动态生成页面,或者用于代码生成器的编写等.比如把数据库的表映射成go语言的struct,这些体力活,写个代码生成器是最合适不过的了. 示例例把表转成 struct : 当然这篇 ...
- C语言程序设计实验报告四
C程序设计实验报告 姓 名:赖瑾 实验地点:家 实验时间:2020年4月9日 实验项目:5.3.1练习2 求数列的前n项和 5.3.2练习2 求水仙花数 5.3.4 十进制转换 5.3.5练习1 百马 ...
- P2816 宋荣子搭积木
描述:https://www.luogu.com.cn/problem/P2816 saruka非常喜欢搭积木,他一共有n块积木.而且saruka的积木很特殊,只能一块块的竖着摞,可以摞很多列.说过s ...
- Java λ表达式
目录 Java Lambda表达式 1. 函数式编程思想 2. 体验Lambda的更优写法 3. Lambda表达式的标准格式 4. 练习:使用Lambda表达式(无参无返回) 5. 练习:使用Lam ...
- LTE基站开局流程
1.全局参数配置 MOD ENODEB :修改基站 ADD CNOPERATOR: 添加运营商 ADD CNOPERATORTA:添加跟踪区(TA) 2.设备参数配置(机柜.机框.RRU.光纤链 ...
- Spring cloud系列教程第二篇:支付项目父工程图文搭建
Spring cloud系列教程第二篇:支付项目父工程图文搭建 在讲解spring cloud相关的技术的时候,咱们就模拟订单支付这个流程来讲讲 在这个支付模块微服务搭建过程中,上面的这些技术,都会融 ...
- JPA与hibernate-------JPA
ORM概述 ORM(Object-Relational Mapping) 表示对象关系映射.在面向对象的软件开发中,通过ORM,就可以把对象映射到关系型数据库中.只要有一套程序能够做到建立对象与数据库 ...
- C# 基础至集合-数组、List<T>、ArrayList、LinkedList、HashMap的一些区别
1:数组 ]; //赋值 strs[] = "; strs[] = "; //修改 strs[] = "burg"; //删除 没法删除 除非转化为可变数组li ...
- failed parsing overlays.
clearn + rebuild + 重新运行: 删掉模拟器进程 + 重新运行: