Как можно иметь родительский компонент для маршрутизации на домашнюю страницу после успешного завершения дочернего компонента в регистрации?

Question

Я хочу, чтобы мой родительский компонент App.js направил на '/home', если дочерний компонент LoginApp получил ответ.(Вся проверка происходит на стороне сервера, поэтому ответ будет возвращаться только в случае успешной аутентификации).

// 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;

Answer 1

Вы можете сделать это следующим образом:

.then(function (res) {
console.log(res);
props.history.push('/home');
})
.catch(function (err) {
console.log(err);
props.history.push('/');
});

Использовать withRouter из response-router-dom

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

обернуть ваш компонент с помощью withRouter

export default withRouter(LoginApp);