Javascript react-router v4 - browserHistory 未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43822589/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
react-router v4 - browserHistory is undefined
提问by demonofthemist
I am creating my first react app in electron (my first electron app too). I have two routes & need to navigate from one to another. For that I am using following code:
我正在用电子创建我的第一个反应应用程序（也是我的第一个电子应用程序）。我有两条路线，需要从一个导航到另一个。为此，我使用以下代码：
Root
根
ReactDOM.render(
<Router history={browserHistory}>
<App />
</Router>,
document.getElementById('root')
);
App
应用程序
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>
)
}
}
Page
页
import { browserHistory } from 'react-router';
...
browserHistory.push('/city');
This line gives error,
这一行给出了错误，
TypeError: Cannot read property 'push' of undefined
I searched web for possible solution but can't find one! There are many similar questions on SO too, but none of it worked for me :(
我在网上搜索了可能的解决方案，但找不到！SO上也有很多类似的问题，但没有一个对我有用:(
回答by Balthazar
You have to import it from the historymodule now which provides 3 different methods to create different histories.
您现在必须从history模块中导入它，该模块提供了 3 种不同的方法来创建不同的历史记录。
createBrowserHistoryis for use in modern web browsers that support the history APIcreateMemoryHistoryis used as a reference implementation and may also be used in non-DOM environments, like React Native or testscreateHashHistoryfor legacy web browsers
createBrowserHistory用于支持历史 API 的现代 Web 浏览器createMemoryHistory用作参考实现，也可用于非 DOM 环境，如 React Native 或测试createHashHistory对于旧版 Web 浏览器
You cannot use the browser history in an electron environment, use the hash or the memory one.
您不能在电子环境中使用浏览器历史，使用哈希或内存。
import { createHashHistory } from 'history'
const history = createHashHistory()
You can then use the historyinjected in the props
然后你可以history在道具中使用注入的
this.props.history.push('/')
回答by Shubham Khatri
Its is not working for your because in your component you are still using browserHistorywhich is not longer availabe from react-routerpackage. You should change to using history from the historypackage
它对您不起作用，因为在您的组件中您仍在使用browserHistory它不再从react-router包中可用。您应该更改为使用history包中的历史记录
To simplify you can create a history.js file with the following contents
为简化起见，您可以创建一个 history.js 文件，内容如下
import { createBrowserHistory } from 'history'
export default createBrowserHistory();
Root
根
import history from '/path/to/history';
ReactDOM.render(
<Router history={history}>
<App />
</Router>,
document.getElementById('root')
);
Page
页
import history from 'path/to/history';
...
history.push('/city');
回答by Sam Michel
Useful pointers above. The simplest solution I've found is to add:
上面有用的提示。我发现的最简单的解决方案是添加：
import {createBrowserHistory} from 'history';
to your list of import statements, then add:
到您的导入语句列表，然后添加：
const browserHistory = createBrowserHistory();
Might not work perfectly, but for the basic stuff I'm working on seems to do the trick. Hope that helps.
可能无法完美运行，但对于我正在处理的基本内容似乎可以解决问题。希望有帮助。
回答by Shashank K
In react-router v4 initialize router as constant config and access the history through this.propsin child components.
在 react-router v4 中，将路由器初始化为常量配置并通过this.props子组件访问历史记录。
Import you dependecies
导入你的依赖
import { Route, Router } from "react-router";
import { createBrowserHistory } from "history";
Define your router config and add history as 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>)
}
Defining route as a constant and out of render method this would initialize the route config only once.
将路由定义为常量和渲染方法，这只会初始化路由配置一次。
Page Component
页面组件
class Page extend Component {
render() {
this.props.history.push('/');
}
}
The history is now available as props in all the child components defined in routes config.
历史记录现在可用作路由配置中定义的所有子组件中的道具。
回答by vijayst
import { browserHistory } from 'react-router'does not work in React router 4. Link
import { browserHistory } from 'react-router'在 React 路由器 4 中不起作用。链接
Use the redirect component:
使用重定向组件：
import { Redirect } from 'react-router';
<Redirect push to="/somewhere/else"/>
The render function should replace the entire content with Redirect component.
渲染函数应该用重定向组件替换整个内容。
