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

我对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的工作方式不太了解,有人可以帮我吗？或者,如果我做错了什么,请告诉我什么是实现我所需要的正确方法.

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

解决方法:

App组件被重新渲染,因为您说它是视图的根：

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

这不是问题. React旨在重新渲染组件,因此您应牢记这一点.

为什么没有问题？

与现有的大多数模板系统不同,React所谓的渲染不一定涉及DOM更改.当React“重新渲染”一个组件时,它会计算将DOM从其当前状态变为所需状态的最小操作集.这可能是一个空集.

换句话说,对于产生相同HTML的组件,实际上什么也不会做.您的页眉和页脚可能属于此类.

这使其非常快.如果您关心性能,那么除了最苛刻的计算方案外,您可以放心地将其排除在外.

如果确实需要,可以通过实现shouldComponentUpdate()方法来避免重新渲染组件.

不鼓励这样做：React正在朝着stateless, functional components前进,您应该尝试尽可能使用它们.在这种情况下,您的工作是确保相同的道具将呈现相同的HTML. React的神奇引擎将完成其余的工作.

标签：reactjs,react-router,react-router-redux,javascript
来源： https://codeday.me/bug/20191119/2032276.html