react-router v4 - browserHistory 未定义

IT技术 javascript reactjs react-router electron
2021-04-03 13:34:35

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

根

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

5个回答

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

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

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

import { createHashHistory } from 'history'

const history = createHashHistory()

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

this.props.history.push('/')
这样做了，只是Switch在根目录中剪切粘贴，仍然没有变化:(
2021-05-27 13:34:35
我会做相反的事情，移动Router，现在Switch到App
2021-05-27 13:34:35
它现在不出错，但页面没有改变:(
2021-05-28 13:34:35
你在使用Routerfromreact-router-dom吗？
2021-06-06 13:34:35
你可以把Router在App，而不是在根文件，并就在您的顶部Switch？我认为它需要是一个直接的孩子
2021-06-10 13:34:35

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

import {createBrowserHistory} from 'history';

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

const browserHistory = createBrowserHistory();

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

它对您不起作用，因为在您的组件中您仍在使用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');
不，我也对我的组件进行了更改，但它仍然无法正常工作。现在没有错误，但视图是一样的！
2021-05-25 13:34:35
路线有变化吗
2021-06-02 13:34:35
天哪，这些包有糟糕的文档。
2021-06-06 13:34:35

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

使用重定向组件：

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

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

对于上面的代码，我收到错误 Uncaught Error: You should not use outside a Redirect outside the Router
2021-06-14 13:34:35

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

导入你的依赖

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

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

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。

其它你可能感兴趣的问题
上一篇在无状态子组件中传递/访问props 下一篇如何在 React JS 中检查损坏的图像