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. PHP SimpleXML

    安装 SimpleXML 扩展需要 PHP 5 支持. 自 PHP 5 起,SimpleXML 函数是 PHP 核心的组成部分.无需安装即可使用这些函数. PHP 5 SimpleXML 函数 函数 ...

  2. 过滤器(filter)实现

    花了2天时间,实现了过滤器功能,针对数据进行筛选,包含以下7个过滤器: 'date','currency','number','tolowercase','touppercase','orderBy' ...

  3. oracle 界面分页

    /** * */ package org.pan.util; import java.sql.ResultSet; import java.sql.SQLException; import java. ...

  4. 1.一个.java源文件中是否可以包括多个类?2...

    1.一个“.java”源文件中是否可以包括多个类(不是内部类)?有什么限制? 答:可以有多个类,但只能有一个public类,并且public的类名必须与文件名相一致. 2.java有没有goto? 答 ...

  5. Java中 int和Integer的区别+包装类

    --今天用Integer 和Integer 比较 发现有问题,于是去查了查. 1.Java 中的数据类型分为基本数据类型和引用数据类型 int是基本数据类型,Integer是引用数据类型: Inget ...

  6. jQuery的remove和detach的区别

    1.remove([expr])   概述:从DOM中删除所有匹配的元素. 这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素.但除了这个元素本身得以保留之外,其他的 ...

  7. 求最小生成树(Prim算法)(1075)

    Description 求出给定无向带权图的最小生成树.图的定点为字符型,权值为不超过100的整形.在提示中已经给出了部分代码,你只需要完善Prim算法即可. Input 第一行为图的顶点个数n    ...

  8. Windows10 删除已经保存的WIFI热点

    自己的笔记本很多时候都是连接WIFI上网,导致保存的WIFI越来越多,有些都过期不能用了,但还是在列表中存在着,致使列表很长很难看,如下: 删除无用热点的方法如下: win+r运行cmd,进入命令行界 ...

  9. IOS APP IDs

    感谢分享 说下 APP ID 的组成为  APP ID Prefix + APP ID suffix APP ID Prefix 为10个字符  你不用管它 APP ID Suffix  这个有点讲究 ...

  10. android更新SDK时候丢失annotations.jar 导致支持库报错

    I am trying to update my Android SDK Tools to 17 rev. and I updated usign SDK Tools but in Propertie ...