react-router v4 - browserHistory 未定义

Posted 2023-03-22

【中文标题】react-router v4 - browserHistory 未定义

【英文标题】：react-router v4 - browserHistory is undefined

【发布时间】：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(); `

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