重定向到提交的新页面:this.props.history.push

Question

我正在尝试在ReactJS中构建一个简单的工作板，前端。

我已经使用 github jobs API 在 ComponentDidMount 中提取我的 API 数据。

我在表单上有一个handleChange，当我输入求职关键字时，它会返回工作结果。 比如"开发人员"工作，在"纽约"。
这一切都有效。

不过，在提交时，我想将我的数据推送到一个新页面 - "作业结果"。就像你在普通工作网站上看到的那样。 输入职位搜索，结果将加载到新页面上。

我正在尝试使用 this.props.history.push 来推送我存储在集合中的位置数据，并将其返回到网址为"/jobresults"的页面。

不过这是行不通的。 我没有收到错误。只是什么都没有发生，我的页面保持原样。

我做错了什么？这是我的应用程序.js代码。

谢谢 里纳

import React from 'react';
import axios from 'axios';
import ReactDOM from 'react-dom';
import Header from './components/Header';
import Navbar from './components/Navbar';
import Jobs from './components/Jobs';
import HomePageResults from './components/HomePageResults';
import JobResults from './components/JobResults';
import JobDescription from './components/JobDescription';
import ApplyNow from './components/ApplyNow';
import Confirmation from './components/Confirmation';
import './assets/scss/main.scss';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

class App extends React.Component {
constructor() {
super();
console.log('CONSTRUCTOR');
this.state = {
jobs: [],
searchData: '',
cityData: 'new york',
locations: []
};
}

// FUNCTION TO CALL API IS WORKING
componentDidMount() {
console.log('Component Did Mount: WORKING');
axios.get('https://jobs.github.com/positions.json?search=')
.then(res => {
console.log(res.data.slice(0,4));
this.setState({ jobs: res.data.slice(0,4) });
});
}

// HANDCHANGE FOR JOB SEARCH
handleChange = (e) => {
console.log(e.target.value);
this.setState({ searchData: e.target.value });
}

// HANDLE CHANGE FOR LOCATION SEARCH
handleChangeLocation = (e) => {
console.log('location', e.target.value);
this.setState({ cityData: e.target.value });
}

// HANDLE SUBMIT
handleSubmit = (e) => {
e.preventDefault();
console.log(this.state.searchData);
axios.get(`https://jobs.github.com/positions.json?description=${this.state.searchData}&location=${this.state.cityData}`)

.then(res => {
this.setState({ locations: res.data });
console.log('location data', this.state.locations);
})
.then(() => this.props.history.push('/jobresults'));
}

render() {
return(

<main>
<BrowserRouter>
<section>
<Navbar />
<Switch>
<Route path="/jobs" component={Jobs} />
<Route path="/jobresults" component={JobResults} />
<Route path="/jobdescription" component={JobDescription} />
<Route path="/apply" component={ApplyNow} />
<Route path="/confirmation" component={Confirmation} />
</Switch>
<Header
handleChange={this.handleChange}
handleChangeLocation={this.handleChangeLocation}
handleSubmit={this.handleSubmit}
/>
<HomePageResults jobs={this.state.jobs}/>
</section>
</BrowserRouter>
</main>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);

Answer 1

路由道具仅在提供给Route组件的组件中可用，因此您不能在App组件中使用this.props.history。

相反，您可以手动创建history对象并将其提供给Router，这样就可以在您认为合适的地方使用history对象。

import { Router, Route, Switch } from "react-router-dom";
import createHistory from "history/createBrowserHistory";
const history = createHistory();
class App extends React.Component {
// ...
handleSubmit = e => {
e.preventDefault();
axios
.get(
`https://jobs.github.com/positions.json?description=${
this.state.searchData
}&location=${this.state.cityData}`
)
.then(res => {
this.setState({ locations: res.data });
history.push("/jobresults");
})
.catch(error => console.log(error));
};
render() {
return (
<main>
<Router history={history}>{/* ... */}</Router>
</main>
);
}
}