点击“取消”后，我尝试允许我的用户重新路由到<Home/>组件。 <MakePost/>路线中的按钮。我已经尝试了几种方法来实现这一点，但没有一种方法可行。
我的第一次尝试是使用history来自我<App/>中<BrowserRouter/> HOC的index.js组件的history对象。我将<App/>对象从<MakePost/>传递到我的div组件中。然后，在该组件的onClick中，this.props.history.push('/')将调用将调用<Home/>的匿名函数。根据我读过的内容，我相信会使用<App/>组件重新呈现我的应用程序。虽然它确实在浏览器中更改了我的网址栏中的网址，但没有任何内容被重新呈现。
我的第二次尝试是在this.props.history.push('/')中创建一个调用constructor的函数，将其绑定在<MakePost/>中，然后将该绑定函数传递给//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import App from './components/App';
import store from './store';
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App/>
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
//App.js
import React, { Component } from 'react';
import { Route, Switch, Redirect, withRouter, BrowserRouter as Router } from 'react-router-dom';
import { connect } from 'react-redux';
import * as actionCreators from '../actions/actionCreators';
import { bindActionCreators } from 'redux';
import Home from './Home';
import Post from './Post';
import MakePost from './MakePost';
import NotFound from './NotFound';
class App extends Component {
constructor(props) {
super(props);
};
render() {
return [
<Router>
<Switch>
<Route key="home" exact path="/" render={() => <Home {...this.props} />} />
<Route key="makePost" exact path="/makepost" render={() => <MakePost {...this.props}/>} />
<Route key="post" path="/post/:id" render={({ match }) => <Post {...this.props} match={match} />} />
<Route key="notFound" path="/*" render={() => <NotFound />} />
</Switch>
</Router>
];
};
};
const mapDispatchToProps = dispatch => bindActionCreators(actionCreators, dispatch);
const mapStateToProps = state => {
return {
posts: state.posts,
comments: state.comments
};
};
export default withRouter(connect(
mapStateToProps,
mapDispatchToProps)(App));
。这也没有奏效。以下是我的组件布局方式：
{{1}}
我想我可能需要把历史存放在商店里吗？