[React] React Router: Redirect
The Redirect component in react-router does exactly what it sounds like. It allows us to redirect from from one route to another.
import React from 'react';
import {hashHistory, Route, Redirect, Router, Link} from 'react-router'; const Home = () => <div><h1>Home</h1><Links></Links></div>;
const Aboutus = () => <div><h1>About-us</h1><Links></Links></div>;
const About = () => <div><h1>About</h1><Links></Links></div>;
const Contact = () => <div><h1>Contact</h1><Links></Links></div>; const Links = () =>
<nav >
<Link activeStyle={{color: 'green'}} to="/">Home</Link>
<Link activeStyle={{color: 'green'}} to="/about-us">About-us</Link>
<Link activeStyle={{color: 'green'}} to="/about">About</Link>
<Link activeClassName="active" to="/contact">Contact</Link>
</nav>; class App extends React.Component {
render(){
return(
<Router history={hashHistory}>
<Route path="/" component={Home}></Route>
<Route path="/about-us" component={Aboutus}></Route>
<Route path="/contact" component={Contact}></Route>
<Redirect from="*" to="/about-us"></Redirect>
</Router>
);
}
} export default App;
[React] React Router: Redirect的更多相关文章
- ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例
工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说 ...
- Nginx支持 React browser router
修改nginx配置文件,添加try_file配置如下,即可实现对 React browser router 的支持. location / { root /var/www/mysite; try_fi ...
- React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆
2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想 ...
- react 装 router - yarn add react-router-dom@next
react 装 router yarn add react-router-dom@next
- [React] react+redux+router+webpack+antd环境搭建一版
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
- react react使用css
在react 中使用css有以下几种方法 第一种全局使用 app.js import React from 'react'; import Router from "./router&quo ...
- React/React Native 的ES5 ES6写法对照表
//es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...
- React/React Native 的ES5 ES6写法对照表-b
很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...
- [React] React Fundamentals: Integrating Components with D3 and AngularJS
Since React is only interested in the V (view) of MVC, it plays well with other toolkits and framewo ...
- React: React组件的生命周期
一.简介 在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍,但总感觉说的过于简单,毕竟生命周期是React组件的核心部分.在我们熟练使用React挂载和合成组件来创建应用表现层的过程中,针对数 ...
随机推荐
- (转)委托的N种写法,你喜欢哪种?
原文:http://www.cnblogs.com/FreeDong/archive/2013/07/31/3227638.html 一.委托调用方式 1. 最原始版本: delegate strin ...
- [php基础]Mysql日期函数:日期时间格式转换函数详解
在PHP网站开发中,Mysql数据库设计中日期时间字段必不可少,由于Mysql日期函数输出的日期格式与PHP日期函数之间的日期格式兼容性不够,这就需要根据网站实际情况使用Mysql或PHP日期转换函数 ...
- shell 中 2>&1 的使用
一 相关知识 1)默认地,标准的输入为键盘,但是也可以来自文件或管道(pipe |). 2)默认地,标准的输出为终端(terminal),但是也可以重定向到文件,管道或后引号(backquotes ` ...
- 使用DML语句【weber出品必属精品】
DML语句包含以下语法: INSERT:往一个表中增加新行 DELETE:从一个表中删除掉现有的行 UPDATE:更改一个表中现有的行 INSERT语句语法:INSERT INTO TABLE(COL ...
- Y - Design T-Shirt(第二季水)
Description Soon after he decided to design a T-shirt for our Algorithm Board on Free-City BBS, XKA ...
- [转]《深度探索C++对象模型》读书笔记[二]
3.3 Data Member的存取1. 不管什么情况,每一个static data member只有一个实体,放在程序的data segment之中,每次程序取用static member,不管 ...
- SQL Server 2008 查询所有用户表
SQL Server 2008 查询所有用户表的T-SQL语句是: SELECT * FROM sysobjects WHERE [xtype] = 'U' 或者是: SELECT * FROM sy ...
- 详解CSS选择器、优先级与匹配原理
原文链接:http://polaris1119.javaeye.com/blog/764428 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个 ...
- yum 安装 kvm
KVM是什么? for Kernel-based Virtual Machine 安装环境Centos 6.5 mini x64 禁用selinux, 禁用防火墙 安装过程: 1. 查看我们的电脑是 ...
- maven 整理
1. 打包命令: mvn package -DskipTests 2. 发布命令: mvn deploy -DperformRelease=true