Response-router v4 - browserHistory undefined

Я создаю свое первое приложение для реагирования в электроне (мое первое электронное приложение тоже). У меня есть два маршрута и нужно перемещаться из одного в другое. Для этого я использую следующий код:

Root

ReactDOM.render(
  <Router history={browserHistory}>
      <App />
  </Router>,
  document.getElementById('root')
);

приложения

class App extends React.Component {
    constructor() {
        super();
    }
    render() {
        return (
            <div className="app-master">
                <Switch>
                    <Route path='/city' component={CityList}/>
                    <Route path='/' component={SplashScreen}/>
                </Switch>
            </div>
        )
    }
}

Страница

import { browserHistory } from 'react-router';
...
browserHistory.push('/city');

Эта строка дает ошибку,

TypeError: Cannot read property 'push' of undefined

Я искал веб для возможного решения, но не могу его найти! Есть много похожих вопросов и на SO, но ни один из них не работал у меня: (

Ответы

Ответ 1

Вы должны импортировать его из модуля истории, который предоставляет 3 разных метода для создания разных историй.

createBrowserHistory предназначен для использования в современных веб-браузерах, которые поддерживают API истории
createMemoryHistory используется в качестве эталонной реализации и может также использоваться в средах, отличных от DOM, таких как React Native или тесты
createHashHistory для устаревших веб-браузеров

Вы не можете использовать историю браузера в электронной среде, использовать хэш или память.

import { createHashHistory } from 'history'

const history = createHashHistory()

Затем вы можете использовать history введенную в реквизит

this.props.history.push('/')

Ответ 2

Это не работает для вас, потому что в вашем компоненте вы все еще используете browserHistory который больше не доступен из пакета react-router. Вы должны перейти на использование истории из пакета history

Для упрощения вы можете создать файл history.js со следующим содержимым

import { createBrowserHistory } from 'history'

export default createBrowserHistory();

корень

import history from '/path/to/history';

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

страница

import history from 'path/to/history';
...
history.push('/city');

Ответ 3

Полезные указатели выше. Самое простое решение, которое я нашел, это добавить:

import {createBrowserHistory} from 'history';

в список операторов импорта, затем добавьте:

const browserHistory = createBrowserHistory();

Не может работать отлично, но для основного материала, над которым я работаю, похоже, это трюк. Надеюсь, что это поможет.

Ответ 4

import { browserHistory } from 'react-router' не работает в React router 4. Ссылка

Используйте компонент перенаправления:

import { Redirect } from 'react-router';
<Redirect push to="/somewhere/else"/>

Функция рендеринга должна заменить весь контент компонентом Redirect.

Ответ 5

В реакции-маршрутизаторе v4 инициализируйте маршрутизатор как постоянную конфигурацию и получите доступ к истории через this.props в дочерних компонентах.

Импортировать ваши зависимости

import { Route, Router } from "react-router";
import { createBrowserHistory } from "history";

Определите конфигурацию вашего роутера и добавьте историю как опору

const history = createBrowserHistory();
const routes = (
  <Router history={history}>
    <Route path='/city' component={CityList}/>
    <Route path='/' component={SplashScreen}/>
  </Router> )

class App extends Component {
  render() {
    return ( 
    <div className = "app-master> 
      {routes} 
    </div>)
}

Определяя маршрут как константу и вне метода рендеринга, это инициализирует конфигурацию маршрута только один раз.

Компонент страницы

class Page extend Component {
  render() {
    this.props.history.push('/');
  }
}

История теперь доступна как реквизит во всех дочерних компонентах, определенных в конфигурации маршрутов.