关于react-router 路径改变页面没有刷新

叁歲伎倆 2021-12-09 16:25 389阅读 0赞

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 _Router]

转载于:https://www.cnblogs.com/gionlee/p/10944584.html

[react-router _Router]: https://react-guide.github.io/react-router-cn/docs/API.html#router

发表评论取消回复

表情：

评论列表（有 0 条评论，389人围观）

还没有评论，来说两句吧...

相关阅读

相关 iframe锚点问题随着页面的刷新不改变访问的页面

我们借助锚点来实现这个功能。至于锚点是什么，它可以标记一个页面中的一个部分，url中以\后面跟随的就是锚点，然后会直接定位到锚点的内容。锚点的设置可以用location.h

超、凢脫俗/ 2024年02月19日 15:03/ 0 赞/ 51 阅读

相关关于vuex刷新页面数据丢失的问题

在讲vuex数据丢失的问题之前呢，先讲怎么写vuex 1.需要配置（我这里由于需要的内容可能以后会用到，所以分开来写的）在vue的src目录下创建一个store文件夹

红太狼/ 2023年05月29日 13:27/ 0 赞/ 23 阅读

相关 vue ts 跳转当前页面改变参数页面不刷新

使用TS Watch 装饰器监听 $route 变化从新请求数据 @Watch('$route') on$routeChange () \{ this

一时失言乱红尘/ 2023年05月21日 07:03/ 0 赞/ 37 阅读

相关 vue页面跳转没有刷新数据

情景： A页面新增数据，B页面查看新增数据，B页面查看不到刚刚新增的数据原因：页面B加载时，没有执行created（）函数，所以可能是使用了缓存数据解决方法：

àì夳堔傛蜴生んèń/ 2023年01月07日 14:26/ 0 赞/ 216 阅读

相关页面刷新

//初始化 $(document).ready(function () \{ doTurn(1,1); \}); function doTurn(page

向右看齐/ 2022年10月03日 00:43/ 0 赞/ 212 阅读

相关 ReactRouter 4 前瞻

ReactRouter 4 这次改动挺大的，后面又要折腾一次了！！作者：杨森链接：https://zhuanlan.zhihu.com/p/

青旅半醒/ 2022年09月26日 04:56/ 0 赞/ 21 阅读

相关 ionic状态改变时动态（强制）刷新页面

$state.go(stateName,params,config);使用这个方法调到某个状态后，有时需要强制刷新当前页面，使其向后台发起请求，获取最新数据。 1.

ゝ一世哀愁。/ 2022年08月18日 13:17/ 0 赞/ 251 阅读

相关关于Ajax、POST、GET强制刷新页面。

1.通过button绑定onclick事件。 <button onclick="checkedAdd()" class="btn btn-sm btn-succe

痛定思痛。/ 2022年01月07日 05:39/ 0 赞/ 364 阅读

相关关于前端刷新当前页面的方法总结

js刷新当前页面今天想总结一下之前学到的常用三种刷新方法： reload（）方法; replace（）方法; 页面自动刷新; 一，reload

矫情吗；*/ 2021年12月18日 22:49/ 0 赞/ 2245 阅读

相关关于react-router 路径改变页面没有刷新

routert.js 中：　　 <Router> <Switch> <Route exact path="

叁歲伎倆/ 2021年12月09日 16:25/ 0 赞/ 390 阅读