React-Router：使用 Navlink 将道具从一个组件传递到另一个组件

Question

我正在为 routing 使用 <NavLink> 现在如何将 props 传递给<NavLink> 到另一个组件

Answer 1

在第一个组件上执行此操作

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

现在在另一个组件上

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

希望对您有所帮助

谢谢

Answer 2

使用 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>
    }

如果它是基于 class 的组件

console.log(this.props.location)

Answer 3

你也可以使用钩子来传递道具：

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

从另一个访问它component

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

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

}

React-Router：使用 Navlink 将道具从一个组件传递到另一个组件

React-Router: pass props from one component to another using Navlink

reactjs

react-router

react-props