Navigating to another page automatically when called in React-CodePudding

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;

CodePudding user response：

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

CodePudding user response：

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