Назад браузер не работает в reactjs приложении - PullRequest
Новая
       44

Назад браузер не работает в reactjs приложении

0 голосов
/ 26 марта 2020

Впервые на reactjs и хотел бы, чтобы браузер вернулся к go назад к предыдущему состоянию. Но, похоже, go вернулся на предыдущую страницу.

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 веб-приложение , Основан на визуальном шаблоне базового проекта responsejs / asp. net, со встроенным избыточным кодом.

1 Ответ

0 голосов
/ 28 марта 2020

Я использовал гиперссылку onClick для обработки переходов состояний через редукторы ... это было неправильное место.

И было проще отодвинуть изменение местоположения, нажав объект истории в событии 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();
}
...