Question

我正在将<NavLink>用于 routing ，我如何将 props 传递到<NavLink>中到另一个组件

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)

Answer 2

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

<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);

}

Answer 3

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

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

现在在另一个组件上

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

希望有帮助

谢谢

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

3 个答案: