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

  1. ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例

    工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说 ...

  2. Nginx支持 React browser router

    修改nginx配置文件,添加try_file配置如下,即可实现对 React browser router 的支持. location / { root /var/www/mysite; try_fi ...

  3. React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆

    2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想 ...

  4. react 装 router - yarn add react-router-dom@next

    react 装 router yarn add react-router-dom@next

  5. [React] react+redux+router+webpack+antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

  6. react react使用css

    在react 中使用css有以下几种方法 第一种全局使用 app.js import React from 'react'; import Router from "./router&quo ...

  7. React/React Native 的ES5 ES6写法对照表

    //es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...

  8. React/React Native 的ES5 ES6写法对照表-b

    很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...

  9. [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 ...

  10. React: React组件的生命周期

    一.简介 在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍,但总感觉说的过于简单,毕竟生命周期是React组件的核心部分.在我们熟练使用React挂载和合成组件来创建应用表现层的过程中,针对数 ...

随机推荐

  1. linux执行文件命令

    1.如果path中有你的程序所在的目录,那么直接执行filename即可 2.如果path中没有程序所在目录,那么进入目录./filename或者path/filename 比如 wj@ubuntu: ...

  2. div中英文无法自动换行的解决办法

    在一个设定好宽度的div中,当我们输入的中文文字长度超过了设定宽度时,会自动换到下一行.   但是,如果输入的是英文字母,那么,无论你div设定宽度为多少,英文字母都是不换行直接在同一行输出,导致di ...

  3. (转)CentOS下用yum搭建LNMP服务器

    原文链接:http://www.xiaohuai.com/2733 CentOS下搭服务器也折腾好几次了, 每次都知道个大概, 具体repo的地址什么的还都要现找, 实在不效率, 干脆整理记录下来. ...

  4. Lesson 3: The Amazing New Mobile Web

    Lesson 3: The Amazing New Mobile Web Article 1: This is Responsive by Brad Frost 各种响应式网站设计的资源. Artic ...

  5. C#基础学习第三天(.net菜鸟的成长之路-零基础到精通)

    1.复合赋值运算符 += -= *= /= %= 2.关系运算符  > < >= <= == !=  由关系运算符连接的表达式我们称之为关系表达式.  每一个表达式都可以求解出 ...

  6. 武汉科技大学ACM:1001: 谁不爱打牌

    Problem Description BobLee最近在复习考研,但是他也喜欢打牌(有谁不爱玩牌呢?).但是作为一名ACMER,斗地主显然满足不了他的兴趣,于是他和YYD一起YY出来了一个游戏规则, ...

  7. 《python基础教程》笔记之 抽象

    创建函数 记录函数,在函数的开头写下字符串,它就会作为函数的一部分进行存储,这称为文档字符串,如 def square(x): 'Caculates the square of the number ...

  8. iOS开发——C篇&动态内存分析

    再C语言中关于内存是一个很重要的知识点,所以今天我就从c语言的内存分配开始为大家解析一下C语言再iOS开发中非常重要的一些知识. 1:malloc函数的介绍 C语言中开辟内存空间:malloc函数(堆 ...

  9. web登录与授权

    web开发已经流行了很多年,登录与授权也基本有一套通用的流程,下面是我自己常用的登录与授权方式,欢迎大家讨论与吐槽. 概念: 登录是过程,授权是结果.登录只是为了获得页面的访问权限 or 操作权限 o ...

  10. 隐藏NGINX服务器名称 和版本号

    隐藏NGINX服务器名称: 修改或隐藏服务器名称需要修改源码nginx.h,nginx.h在src/core/目录下 .具体操作如下: 把下面两个宏的值修改为自己设定的值,例如"NGX&qu ...