在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/C  Linux  HTML/ react路由Link標(biāo)簽點(diǎn)擊時(shí)候路由不變,重新渲染組件

react路由Link標(biāo)簽點(diǎn)擊時(shí)候路由不變,重新渲染組件

網(wǎng)站左側(cè)導(dǎo)航中點(diǎn)擊link跳轉(zhuǎn)路由,在一個(gè)路由中不同的操作會(huì)寫渲染不同的組件,想在重新點(diǎn)擊左側(cè)導(dǎo)航時(shí)重新渲染為最初的組件,該如何做;

<Link to="/a">個(gè)人資料</a>
組件a中不同的操作,會(huì)根據(jù)判斷渲染不同的組件,我在渲染到第二個(gè)組件的時(shí)候,用戶重新點(diǎn)擊左側(cè)導(dǎo)航想從新走生命周期渲染默認(rèn)的第一個(gè)組件
回答
編輯回答
絯孑氣

使用react-router的createElement解決!
Router.js

......
...... // 省略其他無關(guān)緊要代碼

// 此處為要點(diǎn)擊刷新的組件
const arr = [
    home
];

// 開關(guān)優(yōu)化
let onOff =false;

// 頁面強(qiáng)制刷新,如果需要強(qiáng)制刷新在路由中添加onChange事件以及在組件數(shù)組添加
const createElement=(component, props) =>{
    if (props.children && onOff || props.children && arr.includes(props.routes.slice(-1)[0].getComponent)) {
        let children = Object.assign({}, props.children, {key : `${window.location.pathname}` + new Date().getTime()})
        props = { ...props, children };
        onOff = false;
    }
    return React.createElement(component, props)
}

const onChange = (props, next) => {
    onOff = true
    console.log(`${next.location.pathname}`, 'change');
}

const RouteConfig = (
    <Router history={history} createElement = {createElement}>
        <Route path="/home" getComponent={home} onChange = {onChange} />
        ...
        ...
    </Router>
);

export default RouteConfig;

如果您用的react-router4.0,當(dāng)使用 component 時(shí),router 將使用 React.createElement 根據(jù)給定的 component 創(chuàng)建一個(gè)新的 React 元素。這意味著如果你使用內(nèi)聯(lián)函數(shù)(inline function)傳值給 component將會(huì)產(chǎn)生不必要的重復(fù)裝載。對(duì)于內(nèi)聯(lián)渲染(inline rendering), 建議使用 renderprop。
也可以參考下我新寫的文章:這里有沒有你想要的react-router

2018年3月5日 01:14
編輯回答
刮刮樂

給路由url上加個(gè)參數(shù),可以加在url params也可以是query里

2018年2月19日 00:26