在 React "Can not read push of undefined" 中链接 2 个页面时出错

Question

我已经为React构建了一个web应用程序。我已经尝试通过按钮"从建模页面链接到上传页面；Go"在"建模"选项卡中，当我推送到Upload.jsx时，读取undefined的属性"push"时出错我的modeling.jsx代码：

import React, { Component } from "react";
import {Button} from "react-bootstrap"
class Modeling extends Component {
uploadButton = (event) => {
event.preventDefault();
this.props.history.push({
pathname: "/upload"
});
};

render() {
return (
<div id="modeling">
<div className="container">
<div className="row">
<div className="about-text">
<h2>3D MODELING</h2>
</div>
</div>       
<Button
type="button"
className="btn btn-primary go-button"
onClick={this.uploadButton}
>
Go
</Button>            
</div>
</div>
);
}
}
export default Modeling;

App.js代码：

import React, { Component } from "react";
import { Switch, Route, BrowserRouter as Router } from "react-router-dom";
import Navigation from "./components/navigation";
import Header from "./components/header";
import About from "./components/about";
import Modeling from "./components/modeling";
import Resources from "./components/resources";
import Team from "./components/Team";
import Upload from "./components/upload";
import JsonData from "./data/data.json";
export class App extends Component {
state = {
landingPageData: {}
};
getlandingPageData() {
this.setState({ landingPageData: JsonData });
}
componentDidMount() {
this.getlandingPageData();
}
render() {
return (
<div className="App">
<Navigation />
<Header data={this.state.landingPageData.Header} />
<About data={this.state.landingPageData.About} />
<Modeling data={this.state.landingPageData.Modeling} />
<Resources data={this.state.landingPageData.Resources} />
<Team data={this.state.landingPageData.Team} />
<Router>
<Switch>
<Route exact path="/" component={Navigation} />
<Route path="/about" component={About} />
<Route path="/modeling" component={Modeling} />
<Route path="/upload" component={Upload} />
<Route path="/resource" component={Resources} />
<Route path="/team" component={Team} />
</Switch>
</Router>
</div>
);
}
}
export default App;

我的代码在这里：https://codesandbox.io/s/3d-tool-zjm5m?file=/src/components/modeling.jsx:0-809

有人能过来帮我一下吗？非常感谢！

Answer 1

您可以从父级传递道具，也可以只使用withRouterHoC来推送历史记录。

export default withRouter(Modeling);

https://codesandbox.io/s/3d-tool-forked-dlrdo?file=/src/components/modeling.jsx

Answer 2

我浏览了你的沙盒，你没有使用react router链接组件，在你的导航组件中，更新你的常规链接以使用链接组件：

<ul className="nav navbar-nav navbar-right">
<li>
<Link to="/" className="page-scroll">
Home
</Link>
</li>
<li>
<Link to="about" className="page-scroll">
About
</Link>
</li>
<li>
<Link to="modeling" className="page-scroll">
Modeling
</Link>
</li>
<li>
<Link to="resources" className="page-scroll">
Resources
</Link>
</li>
<li>
<Link to="team" className="page-scroll">
Team
</Link>
</li>
</ul>

请注意我是如何使用链接组件的，您可以使用以下导入将其包括在内：

import { Link } from "react-router-dom";

之后，您的页面应该可以工作了，请记住to属性不应该使用to='#modeling'，因为这不是链接组件的正确语法。

你也可以对你的代码进行一些重构，主要是在你有路由器部分的地方，看看我的代码分叉沙盒。https://codesandbox.io/s/3d-tool-forked-mugyc

Answer 3

您遇到了一些不同的问题。

1.缺少history道具

对于类组件，这可以通过使用withRouter()高阶组件来解决。(对于一个功能组件，我建议使用useHistory挂钩来访问推送api。(

您可以通过withRouter高阶组件访问历史对象的属性和最接近的匹配。无论何时渲染，withRouter都会将更新的匹配、位置和历史道具传递给包装组件。

在建模中。jsx更新导出到

export default withRouter(Modeling);

记得在顶部为withRouter添加导入

import { withRouter } from 'react-router-dom';

2.导航后页面不更新

具有Go按钮的组件不在<Router>组件的渲染树中。因此，即使添加了withRouterHoC，页面也只会更新URL，而不会呈现正确的页面。

在App.js中，您可以更新到以下内容：

render() {
return (
<Router>
<div className="App">
<Navigation />
<Header data={this.state.landingPageData.Header} />
<Switch>
<Route exact path="/" component={Navigation} />
<Route path="/about" component={About} />
<Route path="/modeling" component={Modeling} />
<Route path="/upload" component={Upload} />
<Route path="/resources" component={Resources} />
<Route path="/team" component={Team} />
</Switch>
</div>
</Router>
);
}

3.导航组件中的链接使用<a>标记

当使用react路由器时，您可以使用链接组件：

<ul className="nav navbar-nav navbar-right">
<li>
<Link to="/" className="page-scroll">
Home
</Link>
</li>
<li>
<Link to="/about" className="page-scroll">
About
</Link>
</li>
<li>
<Link to="/modeling" className="page-scroll">
Modeling
</Link>
</li>
<li>
<Link to="/resources" className="page-scroll">
Resources
</Link>
</li>
<li>
<Link to="/team" className="page-scroll">
Team
</Link>
</li>
</ul>

记得为Link组件添加导入

import { Link } from 'react-router-dom';

沙盒更新示例代码：https://codesandbox.io/s/3d-tool-forked-yult1