Navigating to another page automatically when called in React

Question

I have three different routes in a react application setup in the index page (the index and the routes code) is listed below. Whenever I sucessfully register or authenticate myself, or when I am in the home page without the required token, I want to automatically be able to redirect to the required pages.

I tried Navigate and Redirect but they didn't work. Help would be greatly appreciated, thank you very much!

Index

import React from 'react';
import ReactDOM from 'react-dom/client';
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import cookie from 'js-cookie'

import './styles/index.css'
import Home from "./routes/Home";
import Login from "./routes/Login";
import Register from "./routes/Register";


ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <BrowserRouter>
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/login' element={<Login/>}/>
                <Route path='/register' element={<Register/>}/>
            </Routes>
        </BrowserRouter>
    </React.StrictMode>
);

Home

import React from 'react';
import '../styles/home.css'
import cookie from 'js-cookie'

const Home = (props) => {
    const token = cookie.get('token')
    const userId = cookie.get('userId')
    return (
        <>
            Home
        </>
    );
}

export default Home;

Register

import React, {useState} from 'react';
import '../styles/register.css'
import axios from 'axios'

const Register = (props) => {
    const [name, setName] = useState('')
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    const registerUser = (e) => {
        e.preventDefault()
        axios.post('/api/user/register', {
            name: name,
            email: email,
            password: password
        }).then(res => {
            document.cookie = `token=${res.data.token}`
            document.cookie = `userId=${res.data.userId}`
        }).catch(err => {
            alert(`Error registering!`)
            setName('')
            setEmail('')
            setPassword('')
            console.log(err)
        })
    }

    return (
        <>
            <form onSubmit={e => registerUser(e)}>
                <input type="text" placeholder="Enter your Name" value={name} onChange={e => setName(e.target.value)}/>
                <br/>
                <input type="email" placeholder="Enter your Email" required={true} value={email}
                       onChange={e => setEmail(e.target.value)}/>
                <br/>
                <input type="password" placeholder="Enter your Password" required={true} value={password}
                       onChange={e => setPassword(e.target.value)}/>
                <br/>
                <button type="submit">Register</button>
            </form>
        </>
    );
}

export default Register;

Login

import React, {useState} from 'react';
import '../styles/register.css'
import axios from 'axios'

const Login = (props) => {
    const [name, setName] = useState('')
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    const loginUser = (e) => {
        e.preventDefault()
        axios.post('/api/user/login', {
            name: name,
            email: email,
            password: password
        }).then(res => {
            document.cookie = `token=${res.data.token}`
            document.cookie = `userId=${res.data.userId}`
        }).catch(err => {
            alert(`Error logging in!`)
            setName('')
            setEmail('')
            setPassword('')
            console.log(err)
        })
    }

    return (
        <>
            <form onSubmit={e => loginUser(e)}>
                <input type="text" placeholder="Enter your Name" value={name} onChange={e => setName(e.target.value)}/>
                <br/>
                <input type="email" placeholder="Enter your Email" required={true} value={email}
                       onChange={e => setEmail(e.target.value)}/>
                <br/>
                <input type="password" placeholder="Enter your Password" required={true} value={password}
                       onChange={e => setPassword(e.target.value)}/>
                <br/>
                <button type="submit">Login</button>
            </form>
        </>
    );
}

export default Login;

monim · Accepted Answer · 2022-07-03 02:32:52Z

As it seems you are using react-router-dom v6 . you can use useNavigate hook : change your Register file to : import React, {useState} from 'react'; import '../styles/register.css' import axios from 'axios' import { useNavigate } from 'react-router-dom';

const Register = (props) => {
    const navigate = useNavigate();
    const [name, setName] = useState('')
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    const registerUser = (e) => {
        e.preventDefault()
        axios.post('/api/user/register', {
            name: name,
            email: email,
            password: password
        }).then(res => {
            document.cookie = `token=${res.data.token}`
            document.cookie = `userId=${res.data.userId}`; 
            navigate('/login'); // to navigate to login page
        }).catch(err => {
            alert(`Error registering!`)
            setName('')
            setEmail('')
            setPassword('')
            console.log(err)
        })
    }

    return (
        <>
            <form onSubmit={e => registerUser(e)}>
                <input type="text" placeholder="Enter your Name" value={name} onChange={e => setName(e.target.value)}/>
                <br/>
                <input type="email" placeholder="Enter your Email" required={true} value={email}
                       onChange={e => setEmail(e.target.value)}/>
                <br/>
                <input type="password" placeholder="Enter your Password" required={true} value={password}
                       onChange={e => setPassword(e.target.value)}/>
                <br/>
                <button type="submit">Register</button>
            </form>
        </>
    );
}

export default Register;

and change your login to :

import React, {useState} from 'react';
import '../styles/register.css'
import axios from 'axios'
import { useNavigate } from 'react-router-dom';

const Login = (props) => {
    const navigate = useNavigate(); 
    const [name, setName] = useState('')
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    const loginUser = (e) => {
        e.preventDefault()
        axios.post('/api/user/login', {
            name: name,
            email: email,
            password: password
        }).then(res => {
            document.cookie = `token=${res.data.token}`
            document.cookie = `userId=${res.data.userId}`; 
            navigate('/'); // to navigate to home page
        }).catch(err => {
            alert(`Error logging in!`)
            setName('')
            setEmail('')
            setPassword('')
            console.log(err)
        })
    }

    return (
        <>
            <form onSubmit={e => loginUser(e)}>
                <input type="text" placeholder="Enter your Name" value={name} onChange={e => setName(e.target.value)}/>
                <br/>
                <input type="email" placeholder="Enter your Email" required={true} value={email}
                       onChange={e => setEmail(e.target.value)}/>
                <br/>
                <input type="password" placeholder="Enter your Password" required={true} value={password}
                       onChange={e => setPassword(e.target.value)}/>
                <br/>
                <button type="submit">Login</button>
            </form>
        </>
    );
}

export default Login;

NOTE : after registration you'll be redirected to the login page and after login you'll be redirected to home page

PsiKai · Accepted Answer · 2022-07-03 04:43:49Z

Your Routes component can be manually handled by passing in a pathname to the location prop.

ex:

<Routes location={"/login"}>

You can make use of this prop by controlling its value with a useState object. You can get ahold of the current pathname by making use of the useLocation hook that comes with react-router-dom. What I would suggest is to useEffect to detect whenever your location changes, and look to see if the user is authenticated, and direct to the correct route.

Ex:

import { useEffect, useState } from "react"
import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom"
import cookie from 'js-cookie'
import Home from "./routes/Home";
import Login from "./routes/Login";
import Register from "./routes/Register";

function App() {
  const token = cookie.get('token')
  const location = useLocation()

  const [pathName, setPathName] = useState(location.pathname)

  useEffect(() => {
     if (!token) {
        setPathName("/login")
     } else {
        setPathName(location.pathname)
     }
  }, [location)

  return (
    <BrowserRouter>
      <Routes location={pathName}>
        <Route path='/' element={<Home />} />
        <Route path='/login' element={<Login/>}/>
        <Route path='/register' element={<Register/>}/>
      </Routes>
    </BrowserRouter>
  )
}

export default App

Collectives™ on Stack Overflow

Navigating to another page automatically when called in React

Index

Home

Register

Login

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Index

Home

Register

Login

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related