Question

我有一个项目，其中有许多页面组件定义如下：

class ExamplePage extends Component<IProps, IState> {
    constructor(props: IProps) {
        super(props)

        this.state = {...something}
    }

    componentDidMount() {
        //Load all data with fetch/redux actions
    }

    render() {
        return (
            <div className="example"></div>
        )
    }
}

如果我同时在React Router中使用了ExamplePage1和ExamplePage2：

<Switch location={location}>
    <Route exact path='/first-path' component={ExamplePage1}/>
    <Route exact path='/second-path' component={ExamplePage2}/>
</Switch>

我正在示例页面中使用带有NavLink组件的链接。

我的根定义为：

<Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
        <Router history={history}>
            <ScrollToTop>
                <App />
            </ScrollToTop>
        </Router>
    </PersistGate>
</Provider>

一切正常，每个链接均正常运行。问题是当我在浏览器（chrome）中使用后退按钮时。然后，例如，如果我在ExamplePage2中，则在componentDidMount中，每个数据都被加载到state以及redux存储。然后，我单击该页面上的navlink，然后将我重定向到ExamplePage1。然后，我在浏览器（Chrome）中单击“后退”按钮，显示ExamplePage2，但未加载任何数据，看起来好像是“安装”在应用程序历史记录中的某处或其他某处……您是否看到任何概念问题？或如何解决我的问题？

追溯历史React Router（Redux）

0 个答案: