routert.js 中:
  

<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 关于Router的介绍

关于react-router 路径改变页面没有刷新的更多相关文章

  1. React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆

    2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想 ...

  2. 【BUG】---ionic tab-demo项目在modal页跳转URL改变页面不刷新,手动刷新后显示空白

    问题描述: 项目是基于ionic tab的demo,在modal上访问其他页面,地址栏变化了,但是页面不动没刷新,自己手动刷新呢,还是空白,可是访问的页面时有内容的啊 错误: 我的路由配置 .stat ...

  3. react router路径的匹配原则

    路由匹配规则是从上到下执行,一旦发现匹配,就不再其余的规则了. (1):paramName :paramName匹配URL的一个部分,直到遇到下一个/.?.#为止.这个路径参数可以通过this.pro ...

  4. SAAS云平台搭建札记: (四) AntD For React使用react-router-dom路由接收不同参数页面不刷新的问题

    在.net开发员眼里,如果使用MVC,根据路由匹配原则,可以通过各种方式接收参数,比如 /Post/List/1, /Post/List/2,或者 /Post/List?id=1,/Post/List ...

  5. 使用ajax和history.pushState无刷新改变页面URL onpopstate(转)

    Javascript代码 var htmlData1 = $.ajax(    {    url: "/getXXXResponse",    async: false }).re ...

  6. 使用ajax实现无刷新改变页面内容

    如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...

  7. 使用ajax和history.pushState无刷新改变页面URL

    表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...

  8. 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 使用ajax和history.pushState无刷新改变页面URL(转)

    表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...

随机推荐

  1. Pycharm如何在控制台输出窗口中使用Python解释器

    打开菜单栏run->edit configurations,把下图中的复选框选中就可以了.

  2. 字符串无法分割 split无效: java split()使用“.” “\” "|" "*" "+"要转义

    .是特殊字符 特殊字符需要转义. 改成split(“\\.”)

  3. Java方法传参的问题

    1.基本数据类型(byte,short,int,long,float,double,boolean,char)的值传递,不改变其值 2.引用数据类型的值传递,改变其值 3.String类型虽然是引用数 ...

  4. 备忘录模式(Memento、Originator、Caretaker)(状态保存,备份恢复)

    定义:在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样就可以将该对象恢复到原先保存的状态 类型:行为类 类图: 我们在编程的时候,经常需要保存对象的中间状态,当需要的时 ...

  5. HTML5属性

    HTML5同时增加和废除了很多属性.下面介绍一些常用的属性. 1.表单属性 为input(type=text).select.textarea与button元素新增了autofocus属性.(它以指定 ...

  6. 洛谷P1979 [NOIP2013提高组Day2T3]华容道

    P1979 华容道 题目描述 [问题描述] 小 B 最近迷上了华容道,可是他总是要花很长的时间才能完成一次.于是,他想到用编程来完成华容道:给定一种局面, 华容道是否根本就无法完成,如果能完成, 最少 ...

  7. Java IO:为什么InputStream只能读一次

    http://zhangbo-peipei-163-com.iteye.com/blog/2021879 InputStream的接口规范就是这么设计的. /** * Reads the next b ...

  8. PHP 学习1.2

    1. 流程控制 <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=& ...

  9. web前端学习(二)html学习笔记部分(10)-- HTML5构建应用布局和页面

    1.2.25  HTML5构建应用布局和页面 1.2.25.1  HTML5在移动开发中的准则 1.尽量使用单页面开发 2.慎重选择前端UI框架 3.动画.特效使用准则(60fps) 浏览器消耗最小的 ...

  10. 第十章—DOM(二)——Element类型

    Element类型用于表现HTML和XML,提供了对元素标签名,子节点和特效的访问.Element节点具有以下特征: 要访问元素的标签名,可以使用nodeName属性,也可以使用tagName属性.这 ...