React-Router(一)
React-Router基础知识
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
export default function BasicExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
<hr />
{/*
借助<Switch>查看所有子项<Route>元素、并跳转到
当前首个URL。当你有多条路线要渲染而你只想匹配其中
的一个时、使用<Switch>
*/}
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</Switch>
</div>
</Router>
);
}
// 你可以将这些组件作为你的页面
function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}
function About() {
return (
<div>
<h2>About</h2>
</div>
);
}
function Dashboard() {
return (
<div>
<h2>Dashboard</h2>
</div>
);
}
显示效果
点击不同的链接、对应的URL和页面进行相应的变化
React-Router(一)的更多相关文章
- [Redux] Filtering Redux State with React Router Params
We will learn how adding React Router shifts the balance of responsibilities, and how the components ...
- [转] React Router 使用教程
PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...
- [Redux] Navigating with React Router <Link>
We will learn how to change the address bar using a component from React Router. In Root.js: We need ...
- [Redux] Adding React Router to the Project
We will learn how to add React Router to a Redux project and make it render our root component. Inst ...
- React Router基础使用
React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...
- 最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)
请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...
- react router 4.0以上的路由应用
thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...
- React Router 使用教程
一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...
- 关于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 ...
随机推荐
- CF1559D2 Mocha and Diana (Hard Version)
考虑到加树边每次最多只导致一对联通块之间的状态. 所以我们以任意顺序加入当前的合法边. 我们考虑先加入所有可加的\((1,a)\) 然后统计只在\(A\)中与1连的点,\(B\)中与2连的点. 则他们 ...
- 洛谷 P7879 -「SWTR-07」How to AK NOI?(后缀自动机+线段树维护矩乘)
洛谷题面传送门 orz 一发出题人(话说我 AC 这道题的时候,出题人好像就坐在我的右侧呢/cy/cy) 考虑一个很 naive 的 DP,\(dp_i\) 表示 \([l,i]\) 之间的字符串是否 ...
- IDEA 注释模板配置
配置创建类的注释模板 Ctrl + Shift + a --> File and Code Templates // 快捷定位配置 // 路径:File --> Settings --&g ...
- Godunov's 定理
Godunov's theorem 转自Wiki 目录 Godunov's theorem 简介 定理 定理1. 单调保持性(Monotonicity preserving) 定理2. Godunov ...
- CQC认证与3C认证的区别是什么
中国CCC认证为中国的强制性认证(什么产品能做,CQC网上都要目录), CQC是自愿性的,(不能做CCC认证的产品,可以选择做CQC认证) 产品想要在中国市场上流通,特别是进入超市,商场,招标工厂等的 ...
- Shell 格式化输出printf、awk
目录 Shell 文件的格式化与相关处理 printf.awk 格式化打印printf 案例.格式化输出文件内容 输出命令echo 案例 awk数据处理工具 语法格式 处理流程 AWK内置变量 条件 ...
- mongDB进阶
Mongo进阶 聚合 聚合操作将来自多个文档的值组合在一起,并且可以对分组数据执行各种操作以返回单个结果. 文档进入多阶段管道,将文档转换为聚合结果 聚合管道 例子: 第一阶段:过滤,$match 第 ...
- windows Notepad++ 上配置 vs 编译器 , 编译并运行
windows 中 配置 vs编译器 在Linux下,Kris是倾向于在终端中使用gcc和g++来编译C/C++的,在Windows下相信很多人都是选择臃肿的Visual Studio,我亦不免如此. ...
- 【♪♪♪】网易云音乐mp3真实地址
参考别人的博客,得到下面的地址,填上ID号即可,后缀的[.mp3]不用输入 http://music.163.com/song/media/outer/url?id= 例如 最终,合并地址为 http ...
- 【并发编程】Java并发编程-看懂AQS的前世今生
在我们可以深入学习AbstractQueuedSynchronizer(AQS)之前,必须具备了volatile.CAS和模板方法设计模式的知识,本文主要想从AQS的产生背景.设计和结构.源代码实现及 ...