Question

我正在创建我的第一个电子反应应用程序（我的第一个电子应用程序）。我有两条路线＆amp;需要从一个导航到另一个。为此，我使用以下代码：

根

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用于旧版网络浏览器

您无法在电子环境中使用浏览器历史记录，请使用散列或内存。

import { createHashHistory } from 'history'

const history = createHashHistory()

然后，您可以使用道具

中注入的history

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

Answer 2

它不适用于您，因为在您的组件中，您仍在使用browserHistory包中不再提供的react-router。您应该更改为使用history package

中的histroy

为简化起见，您可以使用以下内容创建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');

Answer 3

上面的有用指针。我发现最简单的解决方案是添加：

import {createBrowserHistory} from 'history';

到你的import语句列表，然后添加：

const browserHistory = createBrowserHistory();

可能不能完美地工作，但对于我正在研究的基本内容似乎可以解决问题。希望有所帮助。

Answer 4

import { browserHistory } from 'react-router'在React路由器4中不起作用。Link

使用重定向组件：

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

渲染功能应该用Redirect组件替换整个内容。

Answer 5

在react-router 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('/');
  }
}

历史记录现在可以作为props在路由配置中定义的所有子组件中使用。

react-router v4 - browserHistory未定义

5 个答案:

导入您的依赖物

定义您的路由器配置并将历史记录添加为道具

页面组件