使用 <Navigate /> (react-router-dom v6) 传递道具答案

【问题标题】：Pass props using <Navigate /> (react-router-dom v6)使用 <Navigate /> (react-router-dom v6) 传递道具
【发布时间】：2022-01-12 12:35:23
【问题描述】：

我将<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 内部（这是一个类组件）

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

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

【问题讨论】：

您能分享一下您的 loginForm.jsx 的全部代码吗？
@DiegoBascans loginForm 不是问题，因为我创建了一个新的类组件并将重定向更改为它。道具仍然是空的
我想我找到了答案。我应该使用位置挂钩并像这样访问网址：location.state.from.pathname

标签： reactjs react-router-dom react-props

【解决方案1】：

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

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

【讨论】：