如何使用 react-router 创建单页应用程序

Question

我对 React.js 还很陌生，但我正在使用它构建一个单页应用程序。对于路由，我使用的是 react-router。

我想组织我的页面的方式如下：我想要一个静态的页眉和页脚（只加载一次），然后页面的内容会根据路由而改变。这里没什么特别的，这就是我对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' 被渲染（我知道它是因为我在 'Rendering App' 日志中看到安慰）。这是我不明白的，据我所知，路由之间的切换不应该触发 'App' 组件的渲染，而只是动态注入的组件的渲染。

我不希望每次切换路由时都呈现页眉和页脚，恕我直言，这是拥有单页应用程序的好处。也许我不太了解 react-router 的工作原理，有人可以帮我吗？或者，如果我做错了什么，请告诉我什么是实现我需要的正确方法。

如果您需要查看任何其他代码，请随时询问。谢谢

Answer 1

重新呈现 App 组件，因为您说它是视图的根：

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

这不是问题。 React 旨在重新渲染 Components，您应该牢记这一点。

为什么没有问题？

与大多数模板系统不同，React 所谓的渲染 不一定涉及 DOM 更改 。当 React "re-renders" a Component 时，它会计算将 DOM 从当前状态变为所需状态的最小操作集。这可能是一个空集。

换句话说，对于产生相同 HTML 的 Components，实际上什么都不会做 。您的页眉和页脚可能属于此类。

这使得它非常快。如果您关心性能，除了最苛刻的计算场景之外，您可以放心地将它从您的脑海中剔除。

如果您真的想要，您可以通过实施shouldComponentUpdate()方法来避免重新渲染您的Component。

不鼓励这样做：React 正在朝着 stateless, functional components 发展，您应该尽可能尝试使用它们。在这种情况下，您的工作是 保证相同的 props 将呈现相同的 HTML。 React 的神奇引擎将完成剩下的工作。

如何使用 react-router 创建单页应用程序

How to create a Single Page Application using react-router

javascript

reactjs

react-router

react-router-redux

为什么没有问题？