react-router v4 - browserHistory 未定义答案

【问题标题】：react-router v4 - browserHistory is undefinedreact-router v4 - browserHistory 未定义
【发布时间】：2017-10-04 23:26:52
【问题描述】：

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

根

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

【问题讨论】：

因为你在 App 构造函数中没有做任何特别的事情，这部分是不必要的：`constructor() { super(); } `

标签： javascript reactjs react-router electron

【解决方案1】：

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

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

您不能在电子环境中使用浏览器历史记录，只能使用哈希或内存。

import { createHashHistory } from 'history'

const history = createHashHistory()

然后你可以使用注入到 props 中的history

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

【讨论】：

它现在不给出错误，但页面没有改变:(
你使用的是来自react-router-dom的Router吗？
你能把Router 放在App 中，而不是放在根文件中，然后放在你的Switch 上面吗？我认为它需要是一个直接的孩子
这样做了，只是将Switch 剪切粘贴到root 中，仍然没有变化:(
我会反其道而行之，将Router 和现在的Switch 移动到App

【解决方案2】：

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

import {createBrowserHistory} from 'history';

到您的导入语句列表中，然后添加：

const browserHistory = createBrowserHistory();

可能无法完美运行，但对于我正在处理的基本内容似乎可以解决问题。希望对您有所帮助。

【讨论】：

【解决方案3】：

它对您不起作用，因为在您的组件中您仍在使用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');

【讨论】：

不，我的组件也进行了更改，但仍然无法正常工作。现在没有错误，但是视图是一样的！
路线变了吗
天哪，这些软件包的文档很糟糕。

【解决方案4】：

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

使用重定向组件：

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

渲染函数应该用重定向组件替换整个内容。

【讨论】：

对于上面的代码我收到错误Uncaught Error: You should not use outside a Redirect outside the Router

【解决方案5】：

在 react-router v4 中，将路由器初始化为常量配置，并通过子组件中的 this.props 访问历史记录。

导入你的依赖项

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

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

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 在路由配置中定义的所有子组件中使用。

【讨论】：