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. Jquery+css实现图片无缝滚动轮播

    Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...

  2. [php基础]PHP环境变量$_SERVER和系统常量详细说明

    在PHP网站开发中,为了满足网站的需要,时常需要对PHP环境变量进行设置和应用,在虚拟主机环境下,有时我们更需要通过PHP环境变量操作函数来对PHP环境变量值进行设置.为此我们有必要对PHP环境变量先 ...

  3. shell中if做比较

    比较两个字符串是否相等的办法是: if [ "$test"x = "test"x ]; then 这里的关键有几点: 1 使用单个等号 2 注意到等号两边各有一 ...

  4. mysql复制表

    create table 表名 like 要复制的表名  //复制表结构 insert into 表名 select * from 要复制的表名  //复制数据 方法2,一般不推荐,如果后台加数据,可 ...

  5. javascript 比较对象(hashcode)

    javascript 对象的比较是比较坑爹的一件事,因为javascript对象比较的是引用地址!当两个内容完全一样的对象比较: var object1={ name:"1234 " ...

  6. JAVA classpath, 纠正我一直以来错误的认知

    如何调在CLI中使用java tool(JDK中的java命令)调用一个打包在jar中的类,我想大多数人都能给出笼统的方案: java -classpath xxxxx com.test.classA ...

  7. C#操作Excel文件(转)

    摘要:本文介绍了Excel对象.C#中的受管代码和非受管代码,并介绍了COM组件在.net环境中的使用. 关键词:受管代码:非受管代码:Excel对象:动态连接库 引言 Excel是微软公司办公自动化 ...

  8. htmlspecialchars()函数

    htmlspecialchars() 函数把一些预定义的字符转换为 HTML 实体. 预定义的字符是: & (和号) 成为 & " (双引号) 成为 " ' (单引 ...

  9. PHP几个防SQL注入攻击自带函数区别

    SQL注入攻击是黑客攻击网站最常用的手段.如果你的站点没有使用严格的用户输入检验,那么常容易遭到SQL注入攻击.SQL注入攻击通常通过给站点数据库提交不良的数据或查询语句来实现,很可能使数据库中的纪录 ...

  10. iOS7——图像资源Images Assets

    iOS7初体验(3)——图像资源Images Assets 分类: iOS开发2013-06-18 16:02 17583人阅读 评论(2) 收藏 举报 ios7Images xcassets图像资源 ...