• 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} />

  • 相关阅读:
    金融法规
    大型网站架构演化
    用一张决策图来重新思考你的网站
    互联网产品的一般商业模式
    怎样开始冥想
    创造安宁舒适工作日的17个办法
    人生规划和GTD——"知"、"得"与"合"
    立即行动的七个方法
    文件归档的学问
    入门GTD时间管理系统必读
  • 原文地址:https://www.cnblogs.com/zhanglanzuopin/p/12922627.html
Copyright © 2020-2023  润新知