2

I want to redirect to home page after successful login.I searched throughly but didn't find the solution to this. Thanks in advance

//imported react-router
import { Redirect } from 'react-router';

//main route file
<Router>
  <div>
    <Route exact path = "/" component={ App } />
    <Route path = "/home" component={ Homepage } />
  </div>
</Router>

//redirect after ajax success
$.ajax({
    type: 'POST',
    url: '/login_participant',
    data: data,
    dataType:'json',
    success:function(data) {
         console.log(data);

         //redirecting home after login successfully
         <Redirect to ="/home" />
    },
    error:function(err) {
         console.log(err);
    }
})
Bhaskararao Gummidi
  • 1,465
  • 3
  • 8
  • 13
  • you are using redirect wrongly. its a jsx tag. it needs to be in the render function. Also stop using jquery ajax and react. its a bad practice. use either axios or fetch function for your ajax calls. this is how you use the redirect jsx tag. https://stackoverflow.com/questions/43230194/how-to-use-redirect-in-the-new-react-router-dom-of-reactjs – Sujit.Warrier Nov 16 '17 at 11:14

1 Answers1

0

<Redirect /> is a simple component, that takes some props and do something with that. It has contract with other components provided by react-router, so it has to know what is the context.

If you want to redirect after successful login, you either have to use react-router-redux (push action) or to keep state flag isUserLoggedIn or sth like that to provide data to your components. Both solution requires using redux/flux or other state container.

If you don't want to use redux/flux, maybe just replace window location? (pathname).

It's all from my side, maybe others have better solution.

Jarosław Wlazło
  • 270
  • 2
  • 13
  • I am new to react. please provide a perpect solution to this – Bhaskararao Gummidi Nov 16 '17 at 10:12
  • 1
    If you're not using redux currently it is major change in your project. I can provide some solution, but I need to look at this a little bit wider. Are you able to provide some sample of your project? If you don't want to do this, I recommend to redirect user with standard javascript API that I mentioned - to replace window location. It is 1 line to change, no major changes. Just Replace your `` with `window.location = 'your_successful_login_location`, or if it is in same origin, maybe just `window.location.pathname = 'your_pathaneme';` – Jarosław Wlazło Nov 16 '17 at 10:18
  • 1
    window.location not working for me – Bhaskararao Gummidi Nov 16 '17 at 10:20
  • 1
    Try `window.location.pathname = '/home';` (in your case) – Jarosław Wlazło Nov 16 '17 at 10:22
  • this is also not working – Bhaskararao Gummidi Nov 16 '17 at 10:34
  • Any error in console? To debug this, try `window.location = 'https://stackoverflow.com'`, if it doesn't work then means, that there are no `success` function call in your ajax call. Please provide console errors, if any – Jarosław Wlazło Nov 16 '17 at 10:38
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/159145/discussion-between-bhaskararao-gummidi-and-jaroslaw-wlazlo). – Bhaskararao Gummidi Nov 16 '17 at 10:45