javascript - react-router v4 - browserHistory 未定义

Question

我正在用 Electron 创建我的第一个 React 应用程序(也是我的第一个 Electron 应用程序)。我有两条路线，需要从一条路线导航到另一条路线。为此，我使用以下代码:

根

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 上也有很多类似的问题，但没有一个对我有用:(

Answer 1

您必须从 history 导入它模块现在提供了 3 种不同的方法来创建不同的历史。

• createBrowserHistory 用于支持 history API 的现代网络浏览器。
• createMemoryHistory 用作引用实现，也可用于非 DOM 环境，如 React Native 或测试
• createHashHistory 用于旧版网络浏览器

你不能在 Electron 环境中使用浏览器历史记录，使用哈希或内存。

import { createHashHistory } from 'history'

const history = createHashHistory()

然后您可以使用在 props 中注入(inject)的 history

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