使用传递道具<navigate /> （反应路由器 dom v6）

Question

我正在为需要身份验证的组件使用 ProtectedRoute（工作正常）。 现在我想在将用户重定向到 loginForm 之前获取位置，如下所示：

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

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

export default ProtectedRoute

这里是 App.js 中对应的路由

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

在 loginForm.jsx 内部（这是一个 class 组件）

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

但是 loginForm 中的 this.props 是一个空的 object。 为什么？ 我现在如何访问<Navigate />的 state 属性？

Answer 1

我只需要在 loginForm.jsx 中使用位置挂钩 (useLocation)（这是一个 class 组件，所以我不得不使用一个技巧来使用其中的挂钩）

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