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

Question

我使用<NavLink>了routing现在如何传递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 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 3

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

现在剩下的唯一问题是，我们如何访问状态数据，以便我们可以基于它更新 UI？为了回答这个问题，我们需要查看在/onboarding/profile路由中渲染的组件。对于我们的示例，我们将其称为配置文件。

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

}