使用 <Navigate /> 传递 props (react-router-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()
  if (auth.getUser()) return children
  return <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 是一个空对象。为什么？我现在如何访问 <Navigate/> 的状态属性？

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

使用 <Navigate /> 传递 props (react-router-dom v6)

Pass props using <Navigate /> (react-router-dom v6)

reactjs

react-router-dom

react-props