每次写代码和学习总是遇到各种问题,一直没有记录的习惯,以后还是要记录一下。
原来写过一个和react相关的项目,路由这一块是其他同学写的,直接单独写了一个router.js直接渲染到index.js的div上,所以全程都没有什么问题。后来有做一个后台管理系统,主要使用AntDesign的Menu组件,将所有的路由都写在了一个页面,也没有遇到什么问题。
1.单独写了一个router.js的大概代码
import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import HomePage from './HomePage';
class Root extends Component {
render() {
return (
<Router>
<Switch>
<Route path='/home' component={HomePage} />
<Redirect from='/' to='/home'></Redirect>
</Switch>
</Router>
export default Root;
2.使用AntDesign的Menu组件
import React, { Component } from 'react';
import { Layout, Menu, Icon } from 'antd';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import AddInformations from './AddInformations'
class Administ extends Component {
render() {
return (
<Router>
<Layout style={{ minHeight: '100vh' }}>
{/*sider和Menu的代码,此处省略,使用Link进行跳转*/}
<Layout>
<Header style={{ background: '#fff', padding: 0 }} />
<Content style={{ margin: '0 16px' }}>
<Route path="/administ/addinformations" component={AddInformations} />
{/*Route列表*/}
</Content>
</Layout>
</Layout>
</Router>
export default Administ;
今天在做一个管理系统的时候,准备使用AntDesign的Menu组件来写,主要想实现的功能是点击Menu组件中的选项,右边的Content中就换上不同的页面(组件),其实和上面一节中2的功能是一样的,但是因为管理系统,子页面比较多,为了避免搞混,所以把所有的routerc抽出来单独写一个组件。但是问题来了,我点击Link的时候,url发生了改变,但是Content中的内容并没有更新。而是要等刷新之后再更新-0-

https://blog.csdn.net/tongshuo_11/article/details/78528969
https://www.cnblogs.com/jlj9520/p/10601195.html
通过百度各种,加自己瞎猫碰死耗子(基础还是漏了不少东西鸭)。
切换路由的时候,页面组件不重新构建,页面也不刷新。(来自参考博客1,但是代码稍微没看懂)
后百度如何让页面组件重新构建,在参考博客2中找到(可以使用组件中的 key 值设置,给对应需要更新的组件设置一个 key 属性,key只要是唯一的即可,这样每次这个key值不一样就能更新。)
问题成功解决:
因为是antDesign的Menu组件,所以Menu有个selectedKeys这个属性表示当前选中的菜单项 key 数组。那么,只要把这个值传递给写Router的子组件的key值就完美了。
将selectedKeys和state中的current绑定,然后假设把路由都写在RouterList 中,那么调用的时候就不直接写成
<RouterList/>
而是传递一个key值给它就好
<RouterList key={this.state.current}/>
{/*这样就可以完美的实现更新了,/RouterList 是写Router的子组件的名字*/}
使用webpack-dev-server做本地开发服务器时,正常情况只需要简单使用webpack-dev-server指令启动即可,但是当项目处于以下两种情况时,往往需要有嵌套路由和异步加载路由:
我们使用react-router这种路由库构建单页面应用路由;
使用html-webpack-plugin插件动态将加载js的[removed]标签注入html文档;
这时,访问localhost:9090是可以正常加载页面和js等文
@ spyke / react-hook-router-link
从react-router的逻辑中摘录的内容,可以更轻松地与第三方UI库集成。
如果您使用的是UI库并希望呈现链接,则一开始您可能会提出以下建议:
< Anchor xss=removed xss=removed xss=removed xss=removed>
这种方法的问题可能是,您将失去对icon支持(链接对如何渲染它一无所知),并开始收到有关多余道具的。
另一种方法是制作自定义组件或HoC,但是在两种情况下,您都获得了更多嵌套的React树和大量代码。
钩子解决了过多的嵌套,因此您有几个钩子,它们具有从react-router的Link组件,可以应用于您自己的组件,以使其行为相同。
该软件包符合并以ESM格式提供原始的稳定JavaScript代码。
Link现在,我们应用需要在各个页面间切换,如果使用锚点元素实现,在每次点击时,页面被重新加载,React Router提供了<Link>组件用来避免这种状况发生。当 你点击<Link>时,url会更新,组件会被重新渲染,但是页面不会重新加载嗯、先看个例子import {Link} from 'react-router-dom';
const Header = ()=>...
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Loading from '../components/loading' //loading组件
import HomePage from '../pages/homePage' //...
React Router如何在url参数不同的情况下跳转页面不更新解决方案说明解决方案及思路componentWillReceiveProps(nextProps)
场景如下:
<Link to={{
pathname: "/product/intro",
state: {
id: item.productCode,
type:...
今天发现, 当使用react-router(v4.2.2)时,路由需要传入参数, 但是如果路由跳转时,url仅仅改变的是参数部分,如从hello/1跳转到hello/2,此时虽然参数更新了,但是页面是不会更新的,这也算是react-router的一个设计缺陷吧
发现网上的解决方法主要有两种
一、先跳转到一个与当前页面不仅仅是路由参数不同的页面,然后再跳转回来,这样路由跳转了两次。如下所示:
参考文档:https://reacttraining.com/react-router/core/guides/redux-integration/blocked-updates
异常现象点击Link url 变化但是页面不更新
出现此问题的条件:
1.使用了react-reduct 的connect
2.Router与Root 之间有 有layout布局 元素
解决办法:withRoute
Blocked Updates
Generally, React Router and Redux work just fine together. Occasionally though, an app can have a component th...