无法读取属性历史记录，因为它未定义，但它是
Posted
技术标签:
【中文标题】无法读取属性历史记录，因为它未定义，但它是【英文标题】：cannot read property history because it's undefined but it is 【发布时间】：2018-01-03 18:23:55 【问题描述】：我收到错误无法读取属性历史记录，但我定义了它。
当我在客户端文件夹的 main.jsx 中使用它时，它使用了这项工作，但现在它停止工作了。
应用程序文件在我的导入文件夹中。
import Router, Route, Switch, Redirect from "react-router-dom";
import createBrowserHistory from "history/createBrowserHistory";
const history = createBrowserHistory();
// App component - represents the whole app
export class App extends Component
constructor(props)
super(props);
render()
return (
<div className="container">
<Router history=history>
<Switch>
<Route path="/" exact component=Home />
<Route
path="/dashboard"
render=() =>
this.props.currentUser ? <Dashboard /> : <NoPermission />
/>
<Route path="/test" component=Test />
<Route component=NotFound />
</Switch>
</Router>
</div>
);
更多信息：
从“history/createBrowserHistory”导入createBrowserHistory；
在该文件中，createBrowserHistory 是默认导出。
export.default = createBrowserHistory;
当尝试 BrowserRouter 而不是路由器并删除历史 const 和 props 时，我在控制台中收到以下错误。
modules.js:26944 Uncaught TypeError: Cannot read property 'history' of undefined
at Link.render (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:26944)
at modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:18399
at measureLifeCyclePerf (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:17679)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:18398)
at ReactCompositeComponentWrapper._renderValidatedComponent (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:18425)
at ReactCompositeComponentWrapper.performInitialMount (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:17965)
at ReactCompositeComponentWrapper.mountComponent (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:17861)
at Object.mountComponent (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:10622)
at ReactDOMComponent.mountChildren (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:16977)
at ReactDOMComponent._createInitialChildren (modules.js?hash=b38005f7c50b72cb1ea0945090b4ba307f31282f:14176)
在我的 main.jsx 中使用 BrowserRouter 时，我可以让它工作。我可以更改 URL，但不会呈现新视图。所以我认为历史还是有问题的。在这种情况下，我没有定义它，但我没有收到任何错误。有什么办法可以检查或解决这个问题？
import React from "react";
import Meteor from "meteor/meteor";
import render from "react-dom";
import "../imports/startup/accounts-config.js";
import App from "../imports/layouts/App.jsx";
import Test from "../imports/Test.jsx";
import BrowserRouter from "react-router-dom";
Meteor.startup(() =>
render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("render-target")
);
);
进一步了解 Kyle 的回答，我将 withrouter 添加到我的测试组件中。
import React, Component from "react";
import PropTypes from "prop-types";
import withRouter from "react-router";
class Test extends Component
static propTypes =
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
;
render()
const match, location, history = this.props;
return (
<div>
<p>This is a test</p>
<p>
You are now at location.pathname
</p>
</div>
);
export default withRouter(Test);
我正在使用 NavLinks 在我的导航栏组件中链接到此路线。
<NavLink to="/test" activeClassName="active">
Test
</NavLink>
但是，单击这些链接不会呈现测试页面。 （网址栏中的地址确实发生了变化）。当我在浏览器中按刷新时，页面加载并且 location.pathname 显示正确的位置。
如果我删除 withrouter，功能是一样的。
我通过不使用组件来嵌套路由器来让它工作。 如果有人能解释一下为什么我将不胜感激。
import Navbar from "../components/Navbar.jsx";
import AccountsUIWrapper from "../components/AccountsUIWrapper.jsx";
//import pages
import Home from "../pages/Home.jsx";
import Dashboard from "../pages/Dashboard.jsx";
import Test from "../Test.jsx";
import NotFound from "../pages/NotFound.jsx";
import NoPermission from "../pages/NoPermission.jsx";
let currentUser = Meteor.user();
const App = () =>
<Router>
<div>
<Navbar currentUser=currentUser />
<AccountsUIWrapper />
<p>
currentUser ? currentUser._id : "current user id not found"
</p>
<Switch>
<Route exact path="/" component=Home />
<Route
path="/dashboard"
render=() => (currentUser ? <Dashboard /> : <NoPermission />)
/>
<Route path="/test" component=Test />
<Route component=NotFound />
</Switch>
</div>
</Router>;
export default App;
【问题讨论】：
createBrowserHistory 是 history/createBrowserHistory 中的默认导出吗？ 需要查看一些结构 - 具体而言，history/createBrowserHistory 与此文件相关的位置在哪里，正如 @zim 所说，它是默认导出吗？ （如果没有，将createBrowserHistory 像这样包装在导入 createBrowserHistory 中）
就像@zim 所说的，您需要检查历史/createBrowserHistory 中的导出。或者不是导入Router，而是导入BrowserRouter，然后你就不需要历史道具了。
我查过了，答案在第一篇文章中。历史文件在我的 node_modules 文件夹中。
@Christoph 你用的是什么版本的 react-router？
【参考方案1】：
React Router 4 已经融入了历史。您可以从BrowserRouter、HashRouter 和MemoryRouter 的文档中看到history 没有参数。
如果您想访问 React Router v4 中的历史记录，您应该在您希望访问它的组件上使用 withRouter HoC。withRouter 将使 (match, history, location ) 在它包装的任何组件中可用.
从这行代码可以看出：var _createBrowserHistory = require('history/createBrowserHistory'); 是BrowserRouter.js 和HashRouter.js 历史记录中的第13 行已经包含在内。它也包含在MemoryRouter.js的第9行的内存路由器中。
尝试将顶部的导入更改为import BrowserRouter as Router, Route, Switch, Redirect from "react-router-dom";，然后从<Router /> 中删除history= history 。
编辑：请查看 React Router 4 的文档。这是basic example。
这是一个代码帖子，以防链接失效。
import React from 'react'
import
BrowserRouter as Router,
Route,
Link
from 'react-router-dom'
const BasicExample = () => (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr/>
<Route exact path="/" component=Home/>
<Route path="/about" component=About/>
<Route path="/topics" component=Topics/>
</div>
</Router>
)
const Home = () => (
<div>
<h2>Home</h2>
</div>
)
const About = () => (
<div>
<h2>About</h2>
</div>
)
const Topics = ( match ) => (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to=`$match.url/rendering`>
Rendering with React
</Link>
</li>
<li>
<Link to=`$match.url/components`>
Components
</Link>
</li>
<li>
<Link to=`$match.url/props-v-state`>
Props v. State
</Link>
</li>
</ul>
<Route path=`$match.url/:topicId` component=Topic/>
<Route exact path=match.url render=() => (
<h3>Please select a topic.</h3>
)/>
</div>
)
const Topic = ( match ) => (
<div>
<h3>match.params.topicId</h3>
</div>
)
export default BasicExample
【讨论】：
谢谢，但我不明白的是，您为什么要使用没有历史记录的路由器？根据我的理解，链接不起作用。我应该如何整合它？ （我们说话时我正在寻找它，但更多信息会很有用） 就像我说的，历史记录在 React 路由器 4 中，它已经包含在你里面了。它在内部使用历史模块。 @Christoph 检查我的更新。链接很简单，只需使用<Link /> 或<NavLink /> 组件。您可以使用history.pushState() 或history.replaceState() 以编程方式进行导航。您可以使用withRouter 访问我的帖子中描述的历史记录。
我在第一篇文章中添加了我的测试组件作为参考。由于刷新页面确实有效，因此似乎没有发生历史推送。
我使用 react router 中的代码而不是使用组件重新创建了路由器。现在它起作用了。知道可能是什么原因，或者这可能是一个错误吗？无论如何，感谢您让我走上正轨。以上是关于无法读取属性历史记录，因为它未定义，但它是的主要内容，如果未能解决你的问题，请参考以下文章