react table里跳轉頁面_react路由配置基礎篇:react-router4.0及以上

隨著react路由組件的不斷升級,react-router4以下的版本和4以上的版本配置還是有一定的區別,這里就不累贅陳述了,筆者分享下使用react-router4.0以上版本的經驗。

1562fc6ab818482735c58c5567ba52f3.png

1、安裝react-router-dom

npm install react-router-dom --save

2、基本配置:在主入口文件App.js中添加如下代碼。

ea71834866de9987a555c95d7a6dfc7b.png

效果如下:

9eb2df1b2c033d8bfa0be4add20e449f.gif

2、配置默認頁面,例如404頁面,需要在App.js中繼續增加以下代碼。

fb8658b88a2db21d09843ea3856dc000.png

效果如下:

a54275ada13bad16b5dcb55869c7774f.gif

3、不同頁面間的參數傳遞,比如從頁面A跳轉至頁面B,實現步驟如下:

3.1、在App.js中修改以下語句,其中“name?/:age?"”中的問號?表示參數可選;

330f62908b4f6ea56ffa8a95727d13f2.png

3.2、在A.js文件中通過標簽實現頁面跳轉,并設置to屬性。

5b7e9ec8a320b6aa4ec1a5a89a77bc8a.png

3.3、在B.js文件中接收A頁面傳遞過來的參數,url中參數從this.props.match.params獲取;

01635da09bd80ac0e5652b9dde5ae546.png

效果如下:

83484d80211fbe5a10536c69abb65943.gif

4、此時,可能有人會問:參數必須放在url中才能傳遞嗎?答案:當然不是,還可以通過以下方式。

4.1、A.js

ddbadc98d4326eaaa2783b621d06db73.png

4.2、B.js

2529ce4371ff047b838f3715f8d97a68.png

效果如下:

d0b81ac5a85d855395e7e53dec6f21a1.gif

5、頁面返回:使用 this.props.history.goBack(),效果如上圖;

注:我會長期堅持分享我的開發經驗和心得,期待閱讀此文章的朋友能關注我的頭條號,及時獲取更新狀態。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/538128.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/538128.shtml
英文地址,請注明出處:http://en.pswp.cn/news/538128.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Caused by: java.lang.ClassNotFoundException: javax.servlet.jsp.jstl.core.LoopTag

明明引入了 jstl&#xff0c;為什么還報錯&#xff1f; 原來引入的不對。 錯誤的引入&#xff1a; <dependency><groupId>javax.servlet.jsp.jstl</groupId><artifactId>jstl</artifactId><version>1.2</version></dependency&…

jade的寫法

標簽直接寫&#xff1a;p或p. 例如&#xff1a; p 今天自己很棒p.今天自己很棒則輸入 <p>今天自己很棒</p><p>今天自己很棒</p>***jage模板記得需要書寫規范&#xff0c;需要空兩個空格。 jage變量調用 jade 的變量調用有 3 種方式 # {表達式} 表達式!…

計算機論文答辯2分鐘演講稿,畢業答辯發言稿三分鐘

論文答辯是一種比較正規的審查形式&#xff0c;有組織、有準備、有鑒定、有計劃的。答辯會由校方、答辯委員會還有答辯者組成。小編在此獻上畢業答辯開場白&#xff0c;希望大家喜歡。畢業答辯發言稿三分鐘1:各位老師&#xff0c;上午好!我叫趙曉琦&#xff0c;是土木工程0801班…

Zookeeper單機安裝

1、 修改操作系統的/etc/hosts 文件中添加&#xff1a; 2、 下載zookeeper 3、 解壓zookeeper 安裝包&#xff1a; $ tar -zxvf zookeeper-3.4.6.tar.gz 4、 在/home/zengmg/zookeeper-3.4.6 目錄下…

cad怎么向下位移_CAD制圖初學入門教程:陣列功能的使用技巧

陣列在浩辰CAD軟件中也是比較常用的功能之一&#xff0c;但是有些CAD制圖初學入門者對此并不是很了解。那么在浩辰CAD軟件中陣列功能怎么用呢&#xff1f;接下來就給大家分享一些關于陣列功能的CAD制圖初學入門技巧吧&#xff01;首先在浩辰CAD軟件中打開CAD圖紙&#xff0c;然…

設置zookeeper開機自啟動

原文連接&#xff1a;http://blog.csdn.net/u012453843/article/details/70162796 -------------------------------------------------------兩種方式可以實現開機自啟動 第一種&#xff1a;直接修改/etc/rc.d/rc.local文件 在/etc/rc.d/rc.local文件中需要輸入兩行&#xff0…

怎樣查找html概念,HTML一般概念_html

■ html 一般概念&#xff1a;這節將簡單介紹 HTML。全稱&#xff1a;HyperText Mark-up Language譯稱&#xff1a;超文本標記語言。簡意&#xff1a;一種為普通文件中某些字句加上標識的語言&#xff0c;其目的在于運用標記(tag)合文件 達到預期的效果。HTML 是在 SGML 定義下…

聯想g470筆記本開vt_最“發泄”評測!飛刀鐵拳暴力輸出,聯想本結局竟然大亮?(附視頻)...

極果潮玩實驗室迎來一塊新的硬骨頭——聯想筆記本。喜歡來點新花樣的小伙伴們聽說它剛到不行&#xff0c;輕薄身板卻很耐造&#xff0c;于是大家都想和它較量一番&#xff0c;看看是什么樣的剛猛讓這款產品名聲在外。本期評測還是本著不走尋常路的風格&#xff0c;看看我們為它…

linux安裝telnet

一.檢查1、[rootlocalhost ~]# telnet bash: telnet: command not found 2、 查詢了是否安裝Telnet包&#xff0c;結果如下&#xff1a; [rootlocalhost ~]# rpm -qa telnet* telnet-server-0.17-47.el6.i686 3、又查詢了xinetd的狀態&#xff1a; [rootlocalhost ~]# service …

Linux里的21究竟是什么

原文連接&#xff1a;http://blog.csdn.net/ggxiaobai/article/details/53507530 --------------------------------------------------------- 我們在Linux下經常會碰到nohup command>/dev/null 2>&1 &這樣形式的命令。首先我們把這條命令大概分解下首先就是一個…

安陽師范學院計算機與信息工程學院吳琴霞,基于甲骨文字形動態描述庫的甲骨文輸入方法...

【摘要】該文分析了目前常用的甲骨文字在編碼和輸入方面的問題和不足,給出了一種甲骨文字形動態描述的方法.該方法在現代漢字的編碼和書寫規范基礎上,使用有向筆段和筆元對甲骨文進行描述,用擴展的編碼區域和外部描述字形庫相結合的方式,解決了甲骨文字特別是異體字和沒有識別的…

【leetcode】590. N-ary Tree Postorder Traversal

題目如下&#xff1a; 解題思路&#xff1a;湊數題2&#xff0c;做完先序做后序。湊數博2。 代碼如下&#xff1a; class Solution(object):def postorder(self, root):""":type root: Node:rtype: List[int]"""if root None:return []res []s…

dubbo控制臺安裝

為什么要安裝這個控制臺&#xff1f; 當我們的服務很多的時候&#xff0c;需要監管&#xff0c;查看&#xff0c;當項目變大的時候&#xff0c;會深深感謝它&#xff01; 管理原理 對注冊中心Zookeeper中注冊的服務進行管理 安裝步驟 1、下載dubbo源碼&#xff0c;要與使用的…

Js中的基本概念

前言&#xff1a;剛畢業的應屆生&#xff0c;學習前端時間并不長&#xff0c;昨天參加面試&#xff0c;一輪筆試&#xff0c;兩輪技術面試。尤其在技術面試的時候感覺到自己基礎知識還是搞的有些亂&#xff0c;也突然明白到了一個扎實的Js基礎對于之后的路是有多重要。準備把Js…

oracle 查詢時間點數據_oracle統計時間段內每一天的數據(推薦)

下面給大家介紹oracle統計時間段內每一天的數據&#xff0c;具體sql語句如下所示&#xff1a;1. 生成1000個隨機數SELECT ROWNUM RN,DBMS_RANDOM.VALUE(0, 1000) RANDOMFROM DUALCONNECT BY ROWNUM < 1000;注&#xff1a;DBMS_RANDOM.VALUE(A, B)是隨機數產生函數, A是區間的…

dubbo服務的運行方式

1、使用Servlet容器運行&#xff08;Tomcat、Jetty等&#xff09;----不可取 缺點&#xff1a;增加復雜性&#xff08;端口、管理&#xff09; 浪費資源&#xff08;內存&#xff09; 假設1個服務模塊時&#xff0c;需要1臺tomcat&#xff0c;消耗3個端口&#xff0c;和200M…

Java讀取HTML傳人文件,java讀取html文件并獲取body中所有的標簽及內容的案例.pdf

java讀讀取取html文文件件,并并獲獲取取body中中所所有有的的標標簽簽及及內內容容的的案案例例這里的獲取的是html文件中body 中的所有標簽以及內容package com.lmt.service.file;import java.io.BufferedReader;import java.io.File;import java.io.FileInputStream;import j…

插件translator_Zotero Jasminum 插件的更新記錄

Jasminum 插件發布后 林知&#xff1a;簡單的Zotero CNKI 中文插件?zhuanlan.zhihu.com受到一些同學的關注&#xff0c;同時也收到許多反饋。我寫這個插件的初衷就是想讓大家在Zotero上能更方便的使用知網&#xff0c;尤其是人文社科相關專業的同學&#xff0c;他們尤其依賴中…

Tomcat的三個端口

8005 <Server port"8005" shutdown"SHUTDOWN"> 關閉tomcat通信接口 8009 <Connector port"8009" protocol"AJP/1.3" redirectPort"8443"/> 與其他http服務器通信接口&#xff0c;用于http服務器集合 8080…

計算機一級考試word題主要,2017年計算機一級考試word題及答案

1 / 7 2017 年計算機一級考試 及答案 計算機還是人們的學習工具和生活工具。借助家用計算機、個人計算機、計算機網、數據庫系統和各種終端設備&#xff0c;那么 2017 年計算機一級考試 及答案有哪一些 ?下面是 才小編收集整理的 2017 年計算機一級考試 及答案&#xff0c;歡迎…