How to ignore Login for another Route using react-router-dom v5

Question

Here I have a already built vuexy template where it has a setup like if user gets logout it routed to the /login , but I'm setting up Forgot Password / Functionality where user will only have email to make post request and in this case I want to route to another route like /password-reset-request , Now this setup is preventing me to achieve it, anybody knows how to do that .

They setup is like that using "react-router-dom": "^5.2.0", this link is in login page

<Link className='brand-logo mb-0' to='/password-reset-request' onClick={e => e.preventDefault()}>
        <span className='brand-logo mb-0'>
          Forgot Password ?
        </span> 
        </Link>

EDIT :

export const authSlice = createSlice({
  name: 'authentication',
  initialState: {
    userData: initialUser()
  },
  reducers: {
    handleLogin: (state, action) => {
      state.userData = action.payload
      state[config.storageTokenKeyName] = action.payload[config.storageTokenKeyName]
      state[config.storageRefreshTokenKeyName] = action.payload[config.storageRefreshTokenKeyName]
      localStorage.setItem('userData', JSON.stringify(action.payload))
      localStorage.setItem(config.storageTokenKeyName, JSON.stringify(action.payload.accessToken))
      localStorage.setItem(config.storageRefreshTokenKeyName, JSON.stringify(action.payload.refreshToken))
    },
    handleLogout: state => {
      state.userData = {}
      state[config.storageTokenKeyName] = null
      state[config.storageRefreshTokenKeyName] = null
      // ** Remove user, accessToken & refreshToken from localStorage
      localStorage.removeItem('userData')
      localStorage.removeItem(config.storageTokenKeyName)
      localStorage.removeItem(config.storageRefreshTokenKeyName)
    }
  }
})

export const { handleLogin, handleLogout } = authSlice.actions

export default authSlice.reducer

If handleLogout called then it redirects to /login

{
    path: '/login',
    component: lazy(() => import('../../views/Login')),
    layout: 'BlankLayout', //
    meta: {
      authRoute: true
    }
  },
{
    path: '/password-reset-request',
    component: lazy(() => import('../../views/AuthComponents/ForgotPassword'))
  },

My main point is if userData is not in local storage then user can also go to /loing and /password-reset-request if he wants to.

Answer 1

I think the problem is that, in your reducer you've only 2 options login and logout and in case user is not logged in, will not be able to access other pages, there are 3 ways to solve it:

• Before redirecting the user to log in check the route he/she is trying to access
• you can use a private route for authentication
• you can create middleware with high order function to check authentication instead of reducer