如何使用react-router創建單頁應用程序

Question

我是React.js的新手，但我正在使用它構建一個單頁面應用程序。 對於路由我使用react-router。

我想組織我的頁面的方式如下：我想要一個靜態頁眉和頁腳（僅加載ONCE），然后頁面的內容將根據路由而改變。 這里沒什么特別的，這基本上是我對SPA的理解。

這是使用路由引導我的應用程序的main.js：

const store = configureStore();
ReactDOM.render(
<Provider store={store}>
    <Router history={history}>
        <Route path="/" component={App}>
            <IndexRoute component={Home}/>

            <Route path="shop-filters-left-3cols" component={ShopFiltersLeft3Cols}/>
            <Route path="about" component={About}/>
            <Route path="login" component={Login}/>

        </Route>
    </Router>
</Provider>,
document.getElementById('main')
);

這是組件App，它基本上包含單個頁面的結構：

export class App extends React.Component {

constructor(){
    super();
    this.render = this.render.bind(this);


}

render() {
    console.log('Rendering App');

    return (<div>
        <LoginModal />
        <Header/>
        <div className="page-content">
            {this.props.children}
        </div>
        <Footer/>
    </div>);
}

}

因此，當我訪問應用程序時，會加載組件“App”，然后將組件“Home”注入主要內容，因為它被聲明為IndexRoute。

一切都很好，直到這里，問題是每次我從一個路由切換到另一個，組件'App'被渲染（我知道它，因為我在控制台中看到'渲染應用程序'日志）。 這是我不明白的，根據我的理解，路由之間的切換不應該觸發'App'組件的渲染，而只觸發動態注入的組件。

我不希望每次切換路由時都會呈現頁眉和頁腳，這是恕我直言，這是一個單頁應用程序的好處。 也許我沒有充分理解反應路由器是如何工作的，有人可以幫助我嗎？ 或者，如果我做錯了什么，請告訴我實現我需要的正確方法是什么。

如果您需要查看任何其他代碼，請不要猶豫。 謝謝

Answer 1

App組件被重新渲染，因為您說它是視圖的根：

<Route path="/" component={App}>

這不是問題 。 React旨在重新渲染Components ，你應該記住你的Components 。

為什么不是問題？

與大多數模板系統不同，React調用渲染不一定涉及DOM更改 。 當React“重新呈現”一個Component ，它會計算將DOM從其當前狀態轉換到所需狀態的最小操作集。 這可能是一個空集。

換句話說，對於生成相同HTML的Components ， 實際上不會做任何事情 。 您的頁眉和頁腳可能屬於此類別。

這使它非常快。 如果您關注性能，除了最苛刻的計算方案之外，您可以安全地將其從腦海中推出。

如果您真的想要 ，可以通過實現shouldComponentUpdate()方法來避免重新呈現Component 。

不鼓勵這樣做：React正朝着無狀態的功能組件發展 ，你應該盡可能地嘗試使用它們。 在這種情況下，您的工作是保證相同的props將呈現相同的HTML 。 React的神奇引擎將完成其余的工作。