一旦子组件在注册中成功,我如何让父组件路由到主页?
How can I have parent component to route to home page once child component has a success in Signup?
如果子组件 LoginApp
有响应,我希望我的父组件 App.js
路由到 '/home'
。 (所有验证都发生在服务器端,因此只有在验证成功时才会返回响应)。
// Child Component
const LoginApp = () => {
const signupWasClickedCallback = (data) => {
console.log(data);
// ----- Adding Favourites
axios.post('/api/account/signup', data)
.then(function (res) {
console.log(res);
})
.catch(function (err) {
console.log(err);
});
};
const loginWasClickedCallback = (data) => {
console.log(data);
axios.post('/api/account/signin', data)
.then(function (res) {
console.log(res);
})
.catch(function (err) {
console.log(err);
});
};
return (
<div className="loginWrapper">
<ReactSignupLoginComponent
title="Welcome to KidKlub!"
handleSignup={signupWasClickedCallback}
handleLogin={loginWasClickedCallback}
/>
</div>
);
};
export default LoginApp;
// Parent Component
class App extends Component {
render() {
return (
<Router>
<div>
<Route exact path="/" component={LoginApp} />
<Route exact path="/home" component={Home} />
</div>
</Router>
);
}
}
export default App;
你可以这样做:
.then(function (res) {
console.log(res);
props.history.push('/home');
})
.catch(function (err) {
console.log(err);
props.history.push('/');
});
使用 react-router 中的 withRouter-dom
import { withRouter } from 'react-router-dom';
用 withRouter 包裹你的组件
export default withRouter(LoginApp);
如果子组件 LoginApp
有响应,我希望我的父组件 App.js
路由到 '/home'
。 (所有验证都发生在服务器端,因此只有在验证成功时才会返回响应)。
// Child Component
const LoginApp = () => {
const signupWasClickedCallback = (data) => {
console.log(data);
// ----- Adding Favourites
axios.post('/api/account/signup', data)
.then(function (res) {
console.log(res);
})
.catch(function (err) {
console.log(err);
});
};
const loginWasClickedCallback = (data) => {
console.log(data);
axios.post('/api/account/signin', data)
.then(function (res) {
console.log(res);
})
.catch(function (err) {
console.log(err);
});
};
return (
<div className="loginWrapper">
<ReactSignupLoginComponent
title="Welcome to KidKlub!"
handleSignup={signupWasClickedCallback}
handleLogin={loginWasClickedCallback}
/>
</div>
);
};
export default LoginApp;
// Parent Component
class App extends Component {
render() {
return (
<Router>
<div>
<Route exact path="/" component={LoginApp} />
<Route exact path="/home" component={Home} />
</div>
</Router>
);
}
}
export default App;
你可以这样做:
.then(function (res) {
console.log(res);
props.history.push('/home');
})
.catch(function (err) {
console.log(err);
props.history.push('/');
});
使用 react-router 中的 withRouter-dom
import { withRouter } from 'react-router-dom';
用 withRouter 包裹你的组件
export default withRouter(LoginApp);