How to route from one page to another?

Question

I was trying to route the page if my http response is successful to the new page i.e. landing page. I have written code for handling http request and its working fine and returning response, if my response is successfull or the login is successful i.e. true then i want to move to my next page i.e my component <Loading /> with some parameter if my response fails then it should be on the samepage

Basically i was trying when i click on login button it should send a http request if the request return a response then it should switch over to another page else it should be on the same page

const Login = () => {

    const [userName , setUserName] = useState("")
    const [userPassword , setUserPassword] = useState("")


    const handleUsernameInput = (event) => {
        setUserName(event.target.value);
        console.log("username entered")
    }

    const handlePasswordInput = (event) => {
        setUserPassword(event.target.value);
        console.log("password entered")
    }

    const [httpData, apiMethod] = useHttpPOSTHandlerdotthen()

    const handleSubmit = () => {
        apiMethod({url: 'url' , data: { "password": userPassword, "username": userName }})
        setUserName("")
        setUserPassword("")
        nextPage();
    }

    const nextPage = () => {
        if (httpData) {
        return <Redirect to={{ pathname: '/landing', key: httpData.key}} />
        }
        else{
            return <Redirect to={{ pathname: '/' }} /> 
        }
    }

    return (
        <div className = "login-page">
            <Form>
                <Form.Control size = "sm" 
                  type="text" 
                  placeholder="Username" 
                  value = {userName}
                  onChange = {event => handleUsernameInput(event)} 
                  />
                <Form.Control size = "sm" 
                     type="password" 
                     placeholder="Password" 
                     value = {userPassword}
                     onChange = {event => handlePasswordInput(event)} 
                     />
                <Button size = "sm" variant="success" 
                onClick = {handleSubmit}>Login</Button>
            </Form>
        </div>
    );
};

export default Login;

score 2 · Answer 1 · answered Apr 25 '20 at 19:42

2

I think you will find all the infos you need in this other thread: How to push to History in React Router v4?

using history is a simple and efficient way to manage "moving" between pages

you can use history.push() function to achieve what you want

answered Apr 25 '20 at 19:42

William Scalabre

635
4
13

James · Accepted Answer · 2020-04-25T21:28:56.533

0

You aren't far away, you can render the Redirect component to perform a HTTP redirect from one page to another when using React Router e.g.

if (httpData) return <Redirect to={{ pathname: '/landing', state: { key: httpData.key } }} />;

// render the login page otherwise

Then inside Landing, you can access the key via this.props.location.state.key.

edited Apr 25 '20 at 21:28

answered Apr 25 '20 at 19:44

James

80,725
18
167
237

Hi @James where should i add this code? inside of jsx or should i create a function and place this code inside of this function and call that function – Apr 25 '20 at 19:51
@ParthTiwari just before you render the login form, I left the bulk of your code out for brevity (indicated by `// render the login page otherwise`) – James Apr 25 '20 at 19:54
Hi @James i just update the code but still it does not render and move to next page code edited too – Apr 25 '20 at 20:04
@ParthTiwari that's because you don't actually render the `Redirect` looking at your code, you call `nextPage` which internally returns the `Redirect` but `handleSubmit` doesn't then return the result of this (`Redirect` needs to be rendered by the component). In your example, get rid of the `nextPage` function and instead put the code I have shown in the example, you should see that when the HTTP request completes, the page will redirect. – James Apr 25 '20 at 20:10
@ParthTiwari what part of the instructions I've already given do you not understand? I've added a short example anyway... – James Apr 25 '20 at 20:20
@ParthTiwari which suggests your hook is always returning a value for `httpData` which doesn't seem correct? I would only expect that to be populated after the request has been made, you should show the code for your hook. FWIW you should perhaps use a library that's tried and tested e.g. [useFetch](https://use-http.com/#/) – James Apr 25 '20 at 20:29
@ParthTiwari yeah so you set the default state to `[]` in your hook, change this to `null` and try the code again, it doesnt make sense to default it to an array when the response from the server appears to be an object. – James Apr 25 '20 at 20:33
ohh i missed that thankyou boss you are great @Jame – Apr 25 '20 at 20:38
hi @Jame do you have an idea how to store the response in global state as i am beginner in react ? any reference will be helpful – Apr 25 '20 at 20:41
@ParthTiwari depending on how complex the state you want to store is, have a look at [React.Context](https://reactjs.org/docs/context.html) for relatively simple state, for more complex state you might want to look at [Redux](https://redux.js.org/introduction/getting-started) (there are many more...) – James Apr 25 '20 at 20:57
Hi @James i don't think i can pass props like this ``` {{ pathname: '/landing', key: httpData.key }} ``` – Apr 25 '20 at 21:03
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/212505/discussion-between-parth-tiwari-and-james). – Apr 25 '20 at 21:30

How to route from one page to another?

2 Answers2

Linked