zoukankan      html  css  js  c++  java
  • react-router 点击左侧栏 路由传参 路由跳转携带参数 两个左侧栏进入同一个组件 可以知道点击的哪个左侧栏进入的组件 react-router-dom多路由共用一个组件时 切换页面地址 页面不刷新的问题

    import {Provider} from 'react-redux'	
    import {Router, hashHistory, Route, IndexRoute, Switch} from 'react-router';
    import store from 'redux/store.js';  	// redux store
    import KYRYComponent from './components/KYRYComponent';
    
    
    const routes = (
      {/* redux 所有组件共用 */}	
      <Provider store={store}>										  
        <Router history={hashHistory}>
    		<Route path="/" component={App}>
                    {/*3个角色 */}
    		<IndexRoute component={KYRYComponent} />       	
    
    		<Route path="cloudProfile" component={CloudOverviewView}/>
    		<Route path="*" component={Error}/></Route>
        </Router>
      </Provider>
    );
    
    ReactDOM.render(routes, document.getElementById('root'));

    import React from 'react';
    // import Experimentlist from '../StudentComponent/Experimentlist';
    // import Classmangement from '../TeacherComponent/Classmangement';
    // import CloudOverviewView from '../page/CloudOverviewView';
    // import Myclass from '../StudentComponent/Personalcenter/Myclass';
    import DataCenterOverviewView from '../page/DataCenterOverviewView';
    
    class KYRYComponent extends React.PureComponent {
    	constructor(props){
    		super(props);
    	}
    	render(){
                    //如果student 走这个组件 user_type怎么来的
    		// if(user_type=='Student') {                    
    		// 	return <Myclass />
                    //如果Teacher 走这个组件	
    		// }else if(user_type=='Teacher'){				 
    		// 	return <Classmangement />
                    //如果Admin 走这个组件	首页走这个	
    		// }else{										 		
    			return <DataCenterOverviewView />
    		// }
    	}
    }
    export default KYRYComponent;
    

      

    http://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html
    
    https://www.jianshu.com/p/22ce81a12659
    
    react-router-dom多路由共用一个组件时,切换页面地址,页面不刷新的问题
    当多个路由使用同一个组件的时候,切换路由的时候,页面组件不重新构建,页面也不刷新
    当切换路由的时候,只是重新render,并不重新构建,如果需要路由切换的时候,组件重新构建,重新完成一次生命周期,则需要给组件加上key
    
    路由不需要修改,我们只需要修改组件,给组件加上key,让router的path属性(params)指向组件的key,就可以实现,组件的重构
    
    这里的props.location.pathname就是router的path属性的值,这样就实现了,router的path属性指向组件的key
    
    这样切换路由的时候,即可完成组件的刷新(重构)
    

      export default (props)=><User {...props} key={props.location.pathname} />

  • 相关阅读:
    窗体设计器出不来
    maven ...../.m2/settings.xml
    myeclipse.ini
    人民币大小写
    驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立 安全连接。错误:
    写了一个浏览器插件
    用Excel计算加权平均分和GPA
    cfree使用cygwin编译程序出现计算机丢失cygwin1.dll解决办法
    apt-cyg update --2017-02-17 07:57:24-- http://mirrors.163.com/cygwin//x86_64/setup.bz2 正在解析主机 mirrors.163.com... 123.58.173.185, 123.58.173.186 正在连接 mirrors.163.com|123.58.173.185|:80... 已连接。 已发出 HTT
    生产者消费者问题
  • 原文地址:https://www.cnblogs.com/zhanglanzuopin/p/12922627.html
Copyright © 2011-2022 走看看