在React应用程序中点击返回按钮不会重新加载页面。

25 浏览
0 Comments

在React应用程序中点击返回按钮不会重新加载页面。

我有一个使用TypeScript编写的React应用程序（版本为16.8.6），使用了React Router（版本为5.0.1）和MobX（版本为5.9.4）。导航功能正常，数据在应该加载时也能正常加载，但是当我点击浏览器的后退按钮时，URL会发生变化，但状态不会更新，页面也不会重新渲染。我已经阅读了很多关于这个问题的文章，以及关于withRouter修复方法的内容，但是尝试后并没有任何改变。

一个典型的使用场景是导航到摘要页面，选择各种导致新数据加载和新的历史状态被推送的内容，然后返回几步到初始状态。大部分历史状态的推送发生在摘要组件中，该组件处理多个路由。我注意到当从摘要页面返回到主页时，重新渲染是按照预期进行的。

我的index.tsx：

import { Provider } from 'mobx-react'
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import App from './App'
import * as serviceWorker from './serviceWorker'
import * as Utils from './utils/Utils'
const rootStore = Utils.createStores()
ReactDOM.render(
    
        
    ,
    document.getElementById('root') as HTMLElement
)
serviceWorker.unregister()

我的app.tsx：

import * as React from 'react'
import { inject, observer } from 'mobx-react'
import { Route, Router, Switch } from 'react-router'
import Home from './pages/Home/Home'
import PackageSummary from './pages/PackageSummary/PackageSummary'
import ErrorPage from './pages/ErrorPage/ErrorPage'
import { STORE_ROUTER } from './constants/Constants'
import { RouterStore } from './stores/RouterStore'
@inject(STORE_ROUTER)
@observer
class App extends React.Component {
    private routerStore = this.props[STORE_ROUTER] as RouterStore
    public render() {
        return (
            
                
                    
                    
                    
                    
                    
                
            
        )
    }
}
export default App

我的router store：

import { RouterStore as BaseRouterStore, syncHistoryWithStore } from 'mobx-react-router'
import { createBrowserHistory } from 'history'
export class RouterStore extends BaseRouterStore {
    constructor() {
        super()
        this.history = syncHistoryWithStore(createBrowserHistory(), this)
    }
}

我创建MobX stores的方法：

export const createStores = () => {
    const routerStore = new RouterStore()
    const packageListStore = new PackageListStore()
    const packageSummaryStore = new PackageSummaryStore()
    const packageUploadStore = new PackageUploadStore()
    return {
        [STORE_ROUTER]: routerStore,
        [STORE_SUPPORT_PACKAGE_LIST]: packageListStore,
        [STORE_SUPPORT_PACKAGE_SUMMARY]: packageSummaryStore,
        [STORE_SUPPORT_PACKAGE_UPLOAD]: packageUploadStore
    }
}

所以我的问题是：

  1. 当用户通过浏览器进行前进/后退时，如何使页面加载正确的数据？
  2. 如果解决方案是使MobX能够观察位置的变化，我应该如何实现？
0

3 答案

0 Comments

在React应用程序中，点击返回按钮不会重新加载页面。这个问题的出现原因是因为在React组件中没有重新加载页面的逻辑。解决方法是使用mobx-react和mobx库来实现观察路由的变化并进行相应的操作。

首先，在组件中引入相关的库：

import { inject, observer } from 'mobx-react';
import { observe } from 'mobx';
('routerStore')

然后，在组件的生命周期函数componentDidMount中添加观察者，并定义回调函数：

class PackageSummary extends React.Component {
  listener = null;
  componentDidMount() {
    this.listener = observe(this.props.routerStore, 'location', ({ oldValue, newValue }) => {
      if (!oldValue || oldValue.pathname !== newValue.pathname) {
        // your logic
      }
    }, true)
  }
  componentWillUnmount() {
    this.listener();
  }
}

上述代码中，observe函数用来观察props中的routerStore对象的location属性的变化。当location属性变化时，回调函数将被触发。在回调函数中，可以根据需要进行相应的操作。

然而，这种方法存在一个问题，即当从'/summary'页面返回到其他页面（例如'/'）时，回调函数也会被触发。因此，我们还需要对路由进行检查，判断当前是哪个页面。为了解决这个问题，建议使用mobx-state-router库，这个库对于与MobX一起使用非常方便。

以上是对于"点击返回按钮不会重新加载页面"问题的解决方法的整理。在代码中，我们通过mobx-react和mobx库来实现观察路由的变化，并根据需要进行相应的操作。同时，建议使用mobx-state-router库来更好地处理路由相关的问题。

0
0 Comments

在React应用中，点击返回按钮后页面不会重新加载的原因可能是因为React应用是单页应用（SPA），在单页应用中，页面只加载一次，之后的页面切换是通过JavaScript动态渲染实现的，因此返回按钮不会重新加载整个页面。

为了解决这个问题，可以尝试通过检测浏览器的返回动作，当检测到返回动作时手动重新加载页面。可以使用以下代码来实现当浏览器返回按钮被点击时手动重新加载页面：

$(window).bind("pageshow", function() {
  // 在这里执行重新加载页面的代码。
});

另外，出于好奇，为什么你需要这么多不同的store呢？

我为每个页面设置了一个store，这似乎是将不同的数据集分离出来的一种逻辑方式。

在React应用中，使用jQuery并不是一个好主意。因为React已经提供了强大的状态管理和虚拟DOM的机制，而jQuery是一个针对DOM操作的库，与React的设计理念不太一致。在React应用中应该尽量避免使用jQuery，而是使用React提供的组件和生命周期方法来处理数据和视图的更新。

0
0 Comments

在React应用中，点击返回按钮不会重新加载页面的原因是React路由器会监测URL的变化，并渲染与路由（URL）相关的组件。因此，需要手动刷新页面或调用window函数来重新加载。

解决方法：

为了解决这个问题，我们可以使用react-router的withRouter方法来包装我们的组件。withRouter是一个高阶组件，它将路由的history、location和match作为props传递给被包装的组件。通过使用withRouter，我们可以在组件中访问到路由的属性和方法。

下面是一个示例代码，演示了如何使用withRouter来解决返回按钮不重新加载页面的问题：

import { withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
  handleBackButtonClick = () => {
    // 这里可以执行一些逻辑操作
    this.props.history.goBack();
  }
  render() {
    return (
      

        
      

    );
  }
}
export default withRouter(MyComponent);

在上面的代码中，我们首先导入了withRouter方法，然后将我们的组件通过withRouter包装。接下来，在组件中定义了一个handleBackButtonClick方法，它会在返回按钮被点击时触发。在该方法中，我们可以执行一些额外的逻辑操作，然后通过this.props.history.goBack()来返回上一个页面。

通过以上的代码，我们可以解决点击返回按钮不重新加载页面的问题。现在，当用户点击返回按钮时，页面会重新加载，从而达到我们的预期效果。

0