无法读取 属性 历史记录,因为它未定义,但它是
cannot read property history because it's undefined but it is
我收到无法读取 属性 历史但我定义了它的错误。
当我在我的客户端文件夹中 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 link 到这条路线。
<NavLink to="/test" activeClassName="active">
Test
</NavLink>
但是单击那些 link 不会呈现测试页。 (URL 栏中的地址确实发生了变化)。当我在浏览器中按下刷新时,页面加载并且 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;
React Router 4 有着悠久的历史。您可以从 BrowserRouter, HashRouter, and MemoryRouter 的文档中看到 history
.
没有参数
如果您想在 React Router v4 中访问历史记录,您应该在您希望访问它的组件上使用 withRouter HoC。withRouter
将使 ({match, history, location })
在它包装的任何组件内可用。
正如您从这行代码中看到的那样:var _createBrowserHistory = require('history/createBrowserHistory');
即 BrowserRouter.js
和 HashRouter.js
历史记录中的第 13 行已经为您包含在内。 MemoryRouter.js
.
第9行的memory router中也包含了它
尝试将顶部的导入更改为 import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";
,然后从 <Router />
中删除 history={ history }
。
编辑:请查看 React Router 4 的文档。这里是 basic example.
这是 post 的代码,以防 link 死机。
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
我收到无法读取 属性 历史但我定义了它的错误。
当我在我的客户端文件夹中 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 link 到这条路线。
<NavLink to="/test" activeClassName="active">
Test
</NavLink>
但是单击那些 link 不会呈现测试页。 (URL 栏中的地址确实发生了变化)。当我在浏览器中按下刷新时,页面加载并且 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;
React Router 4 有着悠久的历史。您可以从 BrowserRouter, HashRouter, and MemoryRouter 的文档中看到 history
.
如果您想在 React Router v4 中访问历史记录,您应该在您希望访问它的组件上使用 withRouter HoC。withRouter
将使 ({match, history, location })
在它包装的任何组件内可用。
正如您从这行代码中看到的那样:var _createBrowserHistory = require('history/createBrowserHistory');
即 BrowserRouter.js
和 HashRouter.js
历史记录中的第 13 行已经为您包含在内。 MemoryRouter.js
.
尝试将顶部的导入更改为 import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";
,然后从 <Router />
中删除 history={ history }
。
编辑:请查看 React Router 4 的文档。这里是 basic example.
这是 post 的代码,以防 link 死机。
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