浏览器返回在 reactjs 应用程序中不起作用

Question

reactjs 新手，希望浏览器返回到之前的状态。但它似乎回到了前一页。

package.json:

"react": "16.11.0",
"react-dom": "16.11.0",
"react-loader-spinner": "^3.1.5",
"react-promise-tracker": "^2.1.0",
"react-redux": "7.1.1",
"react-router": "5.1.2",
"react-router-dom": "5.1.2",
"react-scripts": "^3.2.0",
"reactstrap": "8.1.1",
"redux": "4.0.4",
"redux-thunk": "2.3.0",

index.tsx：

import 'bootstrap/dist/css/bootstrap.css';
import jQuery from "jquery";
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import { createBrowserHistory } from 'history';
import configureStore from './store/configureStore';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { usePromiseTracker } from "react-promise-tracker";
import Loader from 'react-loader-spinner';

declare global {
    interface Window {
        $: any;
        jQuery: any;
    }
}
// export for others scripts to use
window.$ = window.jQuery = jQuery;

// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href') as string;
const history = createBrowserHistory({ basename: baseUrl });

// Get the application-wide store instance, prepopulating with state from the server where available.
const store = configureStore(history);

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <App />
        </ConnectedRouter>
    </Provider>,
    document.getElementById('root'));

registerServiceWorker();

App.tsx：

import * as React from 'react';
import { Route } from 'react-router';
import Layout from './components/Layout';
import Home from './components/Home';
import Counter from './components/Counter';
import Browser from './components/datagrid/Browser';

import '@progress/kendo-theme-bootstrap/dist/all.css';
import './custom.css'

export default () => (
    <Layout>
        <Route exact path='/' component={Browser} />
    </Layout>
);

此时只有一个页面。所需的状态更改通过超链接实现，当使用浏览器后退按钮时，它会移出 spa 应用程序，因为它浏览到前一页。

<a title={props.dataItem.name} onClick={() => this.getItem('', props.dataItem.name)}>{props.dataItem.name}</a>

对此相对较新，这是第一个 reactjs 网络应用程序。基于visual studio reacjs/asp.net核心项目模板，集成redux。

Answer 1

我使用超链接 onClick 来通过 reducer 处理状态转换...这是错误的地方。

通过在 onClick 事件上推送到历史对象来更容易降低位置更改...

但会影响浏览器历史更改侦听器中的减速器状态更改。这样，无论浏览器位置更改来自何处 - 超链接或浏览器按钮，状态更改都会在正确的位置进行处理...

所以改成：

getItem(path: string, name: string) {
    path = path === '' ? this.pathurl : path; // this pathurl is internal variable for maintaining current path information, not germane to current discussion
    const { history } = this.props;
    if (history) history.push(path + name);
}


browserNavListener: any;

componentDidMount() {
    if (this.props.location && this.props.location.pathname !== "/") {
        this.state.path = this.props.location.pathname;
        this.props.changePath(this.props.location.pathname);
    }

    this.browserNavListener = this.props.history.listen(location => {
        this.state.path = location.pathname;
        this.props.changePath(location.pathname);
    });
}

componentWillUnmount() {
    this.browserNavListener();
}