react-router4 跳轉路由如何隱藏元件而不是解除安裝。

腳踩空了_做了前端發表於2019-03-29
React路由元件

最近在寫react專案的時候遇到這麼一個場景,主頁面訪問頻繁，但是有些頁面返回的時候需要保持跳出時候的狀態，有些頁面要重新load元件。一開始遇到這個問題的時候，覺得是不是隻能把需要保持當前狀態的跳轉頁面寫成一個元件，而不去跳轉路由，但是這樣的頁面是在是有點多，這樣會使主頁面變得很龐大，所以只能想辦法如何跳出路由時候不解除安裝。當時覺得很困難，直到看到了children這個屬性之後才發現這個事情真的很簡單。。。

children，react-router-dom中route元件的一個屬性，很多人可能沒有發現過這個屬性，這個屬性其實容易理解，就是不管路由匹配不匹配都會渲染在頁面中，來看一下這個例子；

  render() {
    return (
        <Router>
            <Route path={'/my'} exact children={()=>{
                return <div>my page</div>}
            }>
            </Route>
            <Route path={'/home'} exact component={HomePage}/>
            <Route path={'/person'} exact component={PersonPage}/>
        </Router>
    );
  }
}

class HomePage extends Component {
    render() {
        return (
            <div>
              Home Page
            </div>
        );
    }
}
const PersonPage = ()=>{
    return (
        <div>
            Person Page
        </div>
    );
}
複製程式碼

來，我們看一下效果。

react-router4 跳轉路由如何隱藏元件而不是解除安裝。

這就是children的效果，明明匹配的路由是person，但是卻出現了'/my'的內容。不過這就是正是這個需求想要的，熟悉react程式設計的同學都知道，react都是函式，可以說是把函數語言程式設計發揮到了極致，所以這個函式裡面肯定有引數，所以我們列印一下這個children裡面的引數，

<Route path={'/my'} exact children={(props)=>
    console.log(props);
    return <div>my page</div>}
 }></Route>
複製程式碼

react-router4 跳轉路由如何隱藏元件而不是解除安裝。
看見了引數，是不是一下就明白瞭如何實現效果了把， 所以我們只要判斷一下是否是我們需要保持狀態的路由，是的話就把children的節點隱藏點，不是的話就刪除掉就能實現啦。

<Route path={'/my'} exact children={(props)=>{
    console.log(props);
    return props.location.pathname !== '/person'
        ?
        <div style={{display: props.location.pathname !== '/my' ? 'none': 'block'}}>my page</div>
        :
        ''
}}></Route>
複製程式碼

react-router4 跳轉路由如何隱藏元件而不是解除安裝。

react-router4 跳轉路由如何隱藏元件而不是解除安裝。
這樣就能實現我們的需要了。不過這個屬性不能用在switch裡面，據說這是由於react的分型機制決定的，由於能力較差，還不能解釋為什麼不能再switch裡面使用，所以還請大佬們請教。。。

相關文章