关于react-router 路径改变页面没有刷新
<Router>
<Switch>
<Route exact path="/" component={Login}></Route>
<Route path="/*" component={Layout}></Route>
</Switch>
</Router>
在Layout 组件中:
<Router>
<Switch>
<Route path={`/car/list`} component={car_list} />
<Route path={`/car/details`} component={car_details} />
<Route path={`/car/create`} component={car_create} />
</Switch>
</Router>
出现了从car/details 跳转到 car/list 时出路径改变但是页面停留在car_details的问题,最终发现Layout组件中不能再出现<Router></Router>,否则就会出现上述问题。
最终将Layout组件改为:
<Switch>
<Route path={`/car/list`} component={car_list} />
<Route path={`/car/details`} component={car_details} />
<Route path={`/car/create`} component={car_create} />
</Switch>
每一个坑都是我成长的脚印。
关于react-router 路径改变页面没有刷新的更多相关文章
- React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆
		
2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想 ...
 - 【BUG】---ionic tab-demo项目在modal页跳转URL改变页面不刷新,手动刷新后显示空白
		
问题描述: 项目是基于ionic tab的demo,在modal上访问其他页面,地址栏变化了,但是页面不动没刷新,自己手动刷新呢,还是空白,可是访问的页面时有内容的啊 错误: 我的路由配置 .stat ...
 - react router路径的匹配原则
		
路由匹配规则是从上到下执行,一旦发现匹配,就不再其余的规则了. (1):paramName :paramName匹配URL的一个部分,直到遇到下一个/.?.#为止.这个路径参数可以通过this.pro ...
 - SAAS云平台搭建札记: (四) AntD For React使用react-router-dom路由接收不同参数页面不刷新的问题
		
在.net开发员眼里,如果使用MVC,根据路由匹配原则,可以通过各种方式接收参数,比如 /Post/List/1, /Post/List/2,或者 /Post/List?id=1,/Post/List ...
 - 使用ajax和history.pushState无刷新改变页面URL onpopstate(转)
		
Javascript代码 var htmlData1 = $.ajax( { url: "/getXXXResponse", async: false }).re ...
 - 使用ajax实现无刷新改变页面内容
		
如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...
 - 使用ajax和history.pushState无刷新改变页面URL
		
表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...
 - 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
		
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
 - 使用ajax和history.pushState无刷新改变页面URL(转)
		
表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...
 
随机推荐
- 一个宽度不确定的DIV里放三个水平对齐的DIV,左右两个DIV宽度固定为100px,中间那个DIV自适应宽度
			
方法一:浮动 注意三个div的位置 <html><head> <meta charset="utf-8"> <style type=&q ...
 - Intellij IDEA 创建资源文件夹 source folder
			
[转载]原文链接:https://blog.csdn.net/u014723529/article/details/78050725 之前用 eclipse 新建有一个 source folder , ...
 - 【python之路20】函数作为参数
			
1.函数可以作为参数 1)函数名相当于变量指向函数 2)函数名后面加括号表示调用函数 #!usr/bin/env python # -*- coding:utf-8 -*- def f1(args): ...
 - LUOGU P2827 蚯蚓 (noip 2016)
			
传送门 解题思路 第一眼以为是一个二叉堆,直接上优先队列60分...后来听ztz11说有单调性,新加入的蚯蚓一定比原先在的蚯蚓长度长,开三个队列,分别放原先的长度,切掉后大的那一半,切掉后小的那一半. ...
 - Python 正则表达式解析HTML
 - 【花般绽放】balibali
			
先放项目地址:https://github.com/1067011734/balibali 感谢无私的程序员们分享 我们边看效果边看代码 项目运行出来的效果 先看Home页面 轮播 //src\pag ...
 - 移动端的vh 和 vw简介和使用场景
			
vw 相对于视窗的宽度:视窗宽度是100vw:vh则类似,是相对于视窗的高度,视窗高度是100vh. 这里的视窗指的又是啥? 是浏览器内部宽度大小(window.innerWidth)? 是整个浏览器 ...
 - python基础总结篇
			
''' 数据类型 数值 int: 字符串转int,只能转纯数字组成的字符串 小数,去掉小数部分 bool,true 1 false 0 float: 字符串转float,要么是纯数字的字符串,要么是纯 ...
 - python 对象(object)
 - SDUT-3373_数据结构实验之查找一:二叉排序树
			
数据结构实验之查找一:二叉排序树 Time Limit: 400 ms Memory Limit: 65536 KiB Problem Description 对应给定的一个序列可以唯一确定一棵二叉排 ...