简介

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的更多相关文章

  1. React Router 用法

    React Router 用法 一.DEMO import React from "react"; import { HashRouter as Router, Route, Li ...

  2. [Web 前端] 你不知道的 React Router 4

    cp from https://segmentfault.com/a/1190000010718620 几个月前,React Router 4 发布,我能清晰地感觉到来自 Twitter 大家对新版本 ...

  3. react router路由传参

    今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...

  4. 从 React Router 谈谈路由的那些事

    React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的. Re ...

  5. React Router 4.0 体验

    React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...

  6. angular实现了一个简单demo,angular-weibo-favorites

    前面必须说一段 帮客户做了一个过渡期的项目,唯一的要求就是速度,我只是会点儿基础的php,于是就用tp帮客户做了这个项目.最近和客户架构沟通,后期想把项目重新做一下,就用现在最流行的技术,暂时想的使用 ...

  7. React Router基础使用

    React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...

  8. 关于react router 4 的小实践

    详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react ...

  9. React Router 4.x 开发,这些雷区我们都帮你踩过了

    前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...

随机推荐

  1. 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 ...

  2. go 模板详说

    模板是我们常用的手段用于动态生成页面,或者用于代码生成器的编写等.比如把数据库的表映射成go语言的struct,这些体力活,写个代码生成器是最合适不过的了. 示例例把表转成 struct : 当然这篇 ...

  3. C语言程序设计实验报告四

    C程序设计实验报告 姓 名:赖瑾 实验地点:家 实验时间:2020年4月9日 实验项目:5.3.1练习2 求数列的前n项和 5.3.2练习2 求水仙花数 5.3.4 十进制转换 5.3.5练习1 百马 ...

  4. P2816 宋荣子搭积木

    描述:https://www.luogu.com.cn/problem/P2816 saruka非常喜欢搭积木,他一共有n块积木.而且saruka的积木很特殊,只能一块块的竖着摞,可以摞很多列.说过s ...

  5. Java λ表达式

    目录 Java Lambda表达式 1. 函数式编程思想 2. 体验Lambda的更优写法 3. Lambda表达式的标准格式 4. 练习:使用Lambda表达式(无参无返回) 5. 练习:使用Lam ...

  6. LTE基站开局流程

    1.全局参数配置 MOD  ENODEB :修改基站 ADD  CNOPERATOR: 添加运营商 ADD  CNOPERATORTA:添加跟踪区(TA) 2.设备参数配置(机柜.机框.RRU.光纤链 ...

  7. Spring cloud系列教程第二篇:支付项目父工程图文搭建

    Spring cloud系列教程第二篇:支付项目父工程图文搭建 在讲解spring cloud相关的技术的时候,咱们就模拟订单支付这个流程来讲讲 在这个支付模块微服务搭建过程中,上面的这些技术,都会融 ...

  8. JPA与hibernate-------JPA

    ORM概述 ORM(Object-Relational Mapping) 表示对象关系映射.在面向对象的软件开发中,通过ORM,就可以把对象映射到关系型数据库中.只要有一套程序能够做到建立对象与数据库 ...

  9. C# 基础至集合-数组、List<T>、ArrayList、LinkedList、HashMap的一些区别

    1:数组 ]; //赋值 strs[] = "; strs[] = "; //修改 strs[] = "burg"; //删除 没法删除 除非转化为可变数组li ...

  10. failed parsing overlays.

    clearn + rebuild + 重新运行: 删掉模拟器进程 + 重新运行: