我有路由器功能，可以从其中调用我的Home组件
import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./containers/Home";
import NotFound from "./containers/NotFound";
import InputForm from "./containers/InputForm";
import Logout from "./containers/Logout";
export default function Routes() {
return (
<Switch>
<Route path="/" exact component={Home}/>
<Route path="/login" render={(props) => <InputForm {...props} buttonName={"Вход"} type={"login"} />}/>
<Route path="/signup" render={(props) => <InputForm {...props} buttonName={"Регистрация"} type={"signup"} />}/>
<Route path="/logout" exact component={Logout}/>
<Route component={NotFound}/>
</Switch>
)
}
在我的Home组件中，我已经像这样连接到Redux存储
import React from "react";
import { connect } from "react-redux";
import Promo from "./Promo";
import Profile from "./Profile";
const mapStateToProps = state => {
return { currentUser: state.currentUser };
};
const HomeConnected =({ currentUser }) => {
if (currentUser.token === undefined) {
return(
<Promo />
)
} else {
return(
<Profile />
)
}
};
const Home = connect(mapStateToProps)(HomeConnected);
export default Home
在我的Promo组件中，我想创建重定向到我的应用程序中这样的位置
import React from "react";
import Jumbotron from "react-bootstrap/lib/Jumbotron";
import Button from "react-bootstrap/lib/Button";
export default class Promo extends React.Component{
handleRegisterClick = () => {
this.props.history.push("/signup");
};
render() {
console.log(this)
return (
<Jumbotron>
<p>
<Button bsStyle="primary" onClick={this.handleRegisterClick}>Try this</Button>
</p>
</Jumbotron>
);
}
}
但是点击按钮后出现错误
5 |
6 | export default class Promo extends React.Component{
7 | handleRegisterClick = () => {
> 8 | this.props.history.push("/signup");
9 | };
10 |
11 | render() {
如何将路由器传递给子组件？
您可以将该子组件withRouter包装到由提供的HOC（Wrapper）react-router-dom。
这提供了对react-router API的访问权限。这意味着您将获得所有方法和道具。
Jus用withRouter。
import { withRouter } from "react-router-dom";
...
class Promo extends React.Component{
}
export default withRouter(Promo)
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句