If you’ve created several Routes within your application, you will also want to be able to navigate between them. React Router supplies a Link component that you will use to make this happen.

Import Link:

import {
BrowserRouter as Router,
Route, Link
} from 'react-router-dom';

Add Nav section to the page

const Nav = () => (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link replace to={{pathname: '/contact'}}>Contact</Link>
</nav>
);

There are two ways to nav to another page.

1. to="/about"

2. to={{pathname: '/contact'}}

Here the 'replace' keyword able to help modify pushHistory. Once you use 'replace' it will replace previous state to current state, instead of add one state.

For example.

Current history: ['/', '/about', '/contact'], in the normal case, you hit the 'Back' button in your browser it will bring you back to '/about'.

But once you use 'replace', it will replace ['/', '/about'] to ['/', '/contact']. So you when hit 'Back' button , you will back to '/'.

[React Router v4] Use the React Router v4 Link Component for Navigation Between Routes的更多相关文章

  1. React:快速上手(6)——掌握React Router

    React:快速上手(6)——掌握React Router 引入Router 安装 npm install react-router-dom 基础组件 React Router中有三种类型的组件:路由 ...

  2. (转)2019年 React 新手学习指南 – 从 React 学习线路图说开去

    原文:https://www.html.cn/archives/10111 注:本文根据 React 开发者学习线路图(2018) 结构编写了很多新手如何学习 React 的建议.2019 年有标题党 ...

  3. react第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性)

    第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性) #课程目标 理解路由的原理及应运 理解react-router-dom以及内置的一些组件 合理应用内置组 ...

  4. react第十五单元(react路由的封装,以及路由数据的提取)

    第十五单元(react路由的封装,以及路由数据的提取) #课程目标 熟悉react路由组件及路由传参,封装路由组件能够处理路由表 对多级路由能够实现封装通用路由传递逻辑,实现多级路由的递归传参 对复杂 ...

  5. React Canvas:高性能渲染 React 组

    React Canvas 提供了使用 Canvas 渲染移动 Web App 界面的能力,替代传统的 DOM 渲染,具有更接近 Native App 的使用体验.React Canvas 提供了一组标 ...

  6. [Angular2 Router] Programmatic Router Navigation via the Router API - Relative And Absolute Router Navigation

    In this tutorial we are going to learn how to navigate programmatically (or imperatively) by using t ...

  7. Attempt to write to field 'android.support.v4.app.FragmentManagerImpl android.support.v4.app.Fragment.mFragmentManager' on a null object reference

    E/AndroidRuntime﹕ FATAL EXCEPTION: mainProcess: org.example.magnusluca.drawertestapp, PID: 3624java. ...

  8. React 深入系列1:React 中的元素、组件、实例和节点

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...

  9. React 与 React Native 底层共识:React 是什么

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与 ...

随机推荐

  1. android插件式开发资料整理

    1.DL : Apk动态载入框架 2.android中的动态载入机制

  2. 1.Dubbo教程

    转自:https://blog.csdn.net/hellozpc/article/details/78575773 2. 什么是dubbo 2.1. 简介 DUBBO是一个分布式服务框架,致力于提供 ...

  3. localStorage存储数据位置

    chrome浏览器:C:\Users\Username\AppData\Local\Google\Chrome\User Data\Default\Local Storage 中,虽然后缀名是.loc ...

  4. 不同jquery对象触发相同的函数 “.js-story-title,.js-mt-index-cont2”

    $(document).on("click",".js-story-title,.js-mt-index-cont2",function () {}

  5. js日期常用方法

    js获取日期时间格式 export function formatDateTime(timeStamp) { var date = new Date(); date.setTime(timeStamp ...

  6. C/S与B/S架构比较

    一C/S 1.C/S概念 C/S是Client/Server的缩写.服务器通常采用高性能的PC.工作站或小型机,并采用大型数据库系统,如Oracle.Sybase.Informix或 SQL Serv ...

  7. 洛谷 P1497 木牛流马

    P1497 木牛流马 题目描述 孔明造出了木牛流马 木牛者,方腹曲头,一脚四足,头入领中,舌著于腹.载多而行少,宜可大用,不可小使:特行者数十里,群行者二十里也.曲者为牛头,双者为牛脚,横者为牛领,转 ...

  8. Dcloud课程7 单例模式一般用在什么场景

    Dcloud课程7 单例模式一般用在什么场景 一.总结 一句话总结:连接数据库,这样就保证了和数据之间只有一个连接,从而能够不占用多余资源,这样就极大的减少了资源浪费,减少了mysql或者说服务器压力 ...

  9. Android 解决RecyclerView删除Item导致位置错乱的问题

    RecyclerView的刷新分为内容变化和结构变化,结构变化比如remove和insert等并不会导致viewholder的更新,所以有时候我们使用 notifyItemRemoved(positi ...

  10. CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部分

    问题总结: 1. checkbox和下面隐藏的div对齐,是在清除了默认样式的前提下,而不需要额外设置float: left; 2. 隐藏的div这里不需要专门设置宽高.居中,是靠内容和padding ...