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

  • 相关阅读:
    str_split — 将字符串转换为数组
    str_replace — 子字符串替换
    str_pad — 使用另一个字符串填充字符串为指定长度
    parse_str — 将字符串解析成多个变量
    number_format — 以千位分隔符方式格式化一个数字
    企业邮箱的优势有哪些?使用企业邮箱的好处
    TOM VIP邮箱,化繁为简,在微信里收发邮件
    邮箱办公神操作,让办公更自在,沟通无边界!
    常用的企业邮箱有哪些?企业邮箱有哪几种?
    外贸企业邮箱批发,收费企业邮箱与免费企业邮箱区别
  • 原文地址:https://www.cnblogs.com/zhanglanzuopin/p/12922627.html
Copyright © 2011-2022 走看看