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. 引号 shell

    在学些shell的 grep, awk, sed 中,发现<Linux 与Unix Shell 编程 指南>书中用大多都是单引号. 一开始我总在寻思,为什么用单引号,明明双引号也是行的呀. ...

  2. Hadoop 实现对Value倒序排序

    数据源 A B C D Z 要实现的输出 Z D B C A 看字符顺序,其实什么也没有,只是按照后面的数字进行一次倒序排序,实现思路,1利用hadoop自带的排序功能,2.KV互换 实现代码 pub ...

  3. nginx环境下搭建nagios 3.5.0,及配置pnp4nagios画图

    本文基于<LNMP最新源码安装脚本>,Nagios依赖PHP环境和perl环境,由于Nginx不支持Perl的CGI,需先来搭建Perl环境,Nagios原理介绍略.一.下载最新稳定源码包 ...

  4. iOS中枚举定义的三种方式

    最简单的方式 typedef enum{ num1 = 0, num2 = 1, num3 = 2 }num; 同时我们还可以使用NS_ENUM的方式定义枚举 typedef NS_ENUM (NSI ...

  5. SQL server概述

    sqlserver中包含的对象: 数据库.事务日志.索引.文件组.数据库关系图.视图.存储过程.用户自定义函数.用户.角色.程序集.表.报表.全文目录.用户自定义数据类型 数据库实际上是最高层对象,其 ...

  6. (二)Knockout - ViewModel 的使用

    计算属性 实际应用中,我们通常需要对数据进行加工 如: 指定日期格式,将数字相加... 等,此时可使用ko.computed().当数据发生改变是,KO会使用computed重新计算 DEMO1 更改 ...

  7. osg for android (一) 简单几何物体的加载与显示

    1. 首先需要一个OSG for android的环境. (1).NDK 现在Eclipse 对NDK已经相当友好了,已经不需要另外cygwin的参与,具体可以参考 Android NDK开发篇(一) ...

  8. UVa12304

    基础题,注意精度和旋转方向. #include <iostream> #include <math.h> #include <vector> #include &l ...

  9. 【Linux】 任务调度/计划 cron

    实时查看日志: tail -f /var/log/cron 显示任务调度 bash#crontab -u username -l 编辑 bash#crontab -u username -e 内容: ...

  10. Python自动化运维之11、面向对象基础

    一.简介 面向对象编程是一种编程方式,使用 “类” 和 “对象” 来实现,所以,面向对象编程其实就是对 “类” 和 “对象” 的使用.类就是一个模板,模板里可以包含多个方法(函数),方法里实现各种各样 ...