[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挂载和合成组件来创建应用表现层的过程中,针对数 ...
随机推荐
- 简要介绍 My.Ioc 的用法
下面这段代码展示了 My.Ioc 的基本用法: using System; using System.Collections.Generic; namespace My.Ioc.Sample { pu ...
- Memcached 搭建过程
原文链接:http://www.open-open.com/lib/view/open1324368235733.html 安装 memcached 服务端 yum -y install libeve ...
- Nginx配置域名转发实例
域名:cps.45wan.com 所在阿里云主机:123.35.9.12 45wan没有在阿里云备案 67wan已经在阿里云备案 阿里云主机(假如123.35.9.12)上原来的nginx配置: ...
- Win7系统安装MySQL
最近重装系统,重新搭建编译环境:重装mysql,发现一篇特别好的安装博客(http://blog.csdn.net/longyuhome/article/details/7913375),转载过来,留 ...
- oracle 中如何定位重要(消耗资源多)的SQL【转】
1.查看值得怀疑的SQL )||'%'load, s.executions executes, p.sql_text from(select address, disk_reads, executio ...
- java——JNI(例子控制台(64位)清屏
因为java的最底层是jvm,所以单纯的控制台java程序不能感知jvm再下面的操作系统的情况, 可以通过JNI(Java Native Interface)技术实现java后台调用C++/C的dll ...
- [转]C++智能指针的创建
zero 坐在餐桌前,机械的重复“夹菜 -> 咀嚼 -> 吞咽”的动作序列,脸上用无形的大字写着:我心不在焉.在他的对面坐着 Solmyr ,慢条斯理的吃着他那份午餐,维持着他一贯很有修养 ...
- Ubuntu 13.04 用Sublime Text 2 编译运行 JAVA
将下面的代码粘贴到JavaC.sublime-build中: { "cmd": ["javac \"$file_name\" && j ...
- ubuntu 引导删除
点开始,在搜索中输入cmd,在搜到的cmd上右键以管理员身份运行,在打开的cmd中输入命令:bcdedit在命令结果中找到类似如下的版块: 实模式启动扇区---------------------标识 ...
- 【学习笔记】【Foundation】字典
字典NSDictionary: 用于保存具有映射关系的数据:key-value: 创建NSDictionary的常用方法: dictionary: dictionaryWithContentsOfFi ...