Pass props using (react-router-dom v6)

Question

I am using a <ProtectedRoute/> for components that require authentication (which works fine). Now I want to get the location before redirecting user to loginForm like this:

import React from 'react'
import auth from '../../services/authService'
import { Navigate, useLocation } from 'react-router-dom'

const ProtectedRoute = ({ children }) => {
  const location = useLocation()
  if (auth.getUser()) return children
  return <Navigate to='/login' state={{ from: location }} replace />
}

export default ProtectedRoute

and here are the corresponding routes in App.js

<Route path='/login' element={<LoginForm />} />
<Route
  path='/movies/:id'
  element={
    <ProtectedRoute>
      <MovieForm />
    </ProtectedRoute>
  }
/>

and inside loginForm.jsx (which is a class component)

render() {
  console.log('props', this.props)
  return //...
}

but this.props in loginForm is an empty object. why? how can I access state property of <Navigate/> now?

@DiegoBascans loginForm is not the problem because I made a new class component and changed the redirect to it. still props is empty — wrongman, Dec 07 '21 at 13:35
I think I found the answer. I shoud use location hook and access the url like this: location.state.from.pathname — wrongman, Dec 07 '21 at 13:55

score 1 · Accepted Answer · answered Dec 07 '21 at 14:16

I only had to use location hook (useLocation) inside the loginForm.jsx (this is a class component so I had to use a trick to use hooks inside it)

import React, { Component } from 'react'
import { useLocation } from 'react-router-dom'

let location

const UseLocation = () => {
  location = useLocation()
  return null
}

class LoginForm extends Component {
  submitForm() {
    console.log('returnUrl', location.state.from.pathname)
  }

  render() {
    return <UseLocation />
  }
}

export default LoginForm

Pass props using (react-router-dom v6)

1 Answers1