React-Router：使用Navlink在组件之间传递props

Question

我现在正在使用<NavLink>进行路由，现在如何将props传递到另一个组件中的<NavLink>？

- Krishna Jangid

Answer 1

你可以使用 Link 和 NavLink 来将数据传递给导航组件的方式。

<Link to={{
   pathname:'/home',
   state: {name:'from home page'}  
 }}>
  Go to Home
</Link>

或者使用 NavLink

<NavLink to={{
   pathname:'/home',
   state: {title:'from home page'}  
 }}>
  Go to Home
</NavLink>

在导航的组件内，您可以像这样访问它。

如果是钩子函数

import {useLocation} from 'react-router-dom'

    function App(){
      let location = useLocation();
      console.log(location)
      return <h2>...</h2>
    }

如果它是基于类的组件

console.log(this.props.location)

- akhtarvahid

Answer 2

在第一个组件上执行以下操作。

<NavLink
     to={{
        pathname:"/priview-data",
        aboutProps:{
              selectedidds:this.state.selectedIds
             }
        }}
        exact
       >Preview Question
</NavLink>

现在转到另一个组件

constructor(props) {
    super(props);
    console.log(props.location.aboutProps);
  }

希望它有所帮助

谢谢

- Krishna Jangid

Answer 3

您也可以使用钩子来传递props：

<Link
to={{
pathname: "/home",
userProps: {name: "This is a passed prop"},
}}>
Go to home
</Link>

要从另一个 组件 访问它

import { useLocation} from "react-router-dom"

function OtherComponent() {
let location = useLocation();
console.log(location.userProps);

}

- Blessing

Answer 4

<NavLink to="/onboarding/profile" state={{ from: "occupation" }}>
  Next Step
</NavLink>

现在唯一的问题是，我们如何访问状态数据以便根据其更新UI？为了回答这个问题，我们需要查看在/onboarding/profile路由下正在呈现的组件。对于我们的示例，我们将其称为“Profile”。

    import { useLocation } from 'react-router-dom'
    
    function Profile () {
      let location = useLocation();
      console.log(location.state.from);
    
      return (
        ...
      )

}

- Neeraj Singh

Answer 5

使用Navlink我可以做到以下几点：

 <NavLink
     className={`myStyle`}
     to={{pathname: `/mypath`}}
     state={myMessage}
 >
     message
 </NavLink>

我在另一个组件中使用以下方式访问状态：

import { useLocation } from "react-router-dom";
 
.../...
 
function toto(){  
let location = useLocation();
console.log (location.state)

- Cyrille TUAL