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;

Answer 1

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