如何在React中从一个组件调用另一路由组件并传递所需props

问题原因 #

你无法通过useLocation()拿到state.detail，以及需要给NewJob传job_info参数的问题，有两种成熟的解决方案：

方案1：直接修复路由state传值的问题 #

这是成本最低的方案，不需要修改现有路由结构：

1. 首先确认你的react-router-dom版本为v5及以上，且整个应用外层已经用BrowserRouter/HashRouter组件包裹
2. 你现有代码的判断逻辑有bug：直接访问/new-job路径时，useLocation()返回的state值为null而非undefined，所以你写的typeof state !== 'undefined'判断永远不会命中，修改NewJob组件的代码即可：

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

function NewJob( { jobName, setMenuSelection } ) {
    const { state } = useLocation();
    // 直接判断state是否存在即可
    if (state) {
      const myVal = state.detail
      console.log("myVal", myVal )
    }
}

如果改完还是拿不到值，检查你PastJobs组件里调用的history是否是从useHistory() hook拿到的，而非自己创建的history实例，两个不同上下文的history实例无法共享state数据。

方案2：通过父组件中转，直接给NewJob传prop #

如果你不想用路由state传参，想要直接通过组件prop传递job_info，按以下步骤修改即可：

1. 在App.js中新增状态存储待复制的任务信息：

const [copyJobInfo, setCopyJobInfo] = useState(null);

2. 修改PastJobs的路由配置，把更新状态的方法传给组件：

<Route exact path="/past-jobs"
  render={(props) => <PastJobs 
    setMenuSelection={handleMenuSelection} 
    setCopyJobInfo={setCopyJobInfo}
  />}
/>

3. 修改PastJobs组件的onCopy方法，先存储待复制的信息再跳转：

const onCopy = (job_info) => {
    setConfirmDialog({
        ...confirmDialog,
        isOpen: false
    })
    // 先存值
    props.setCopyJobInfo(job_info)
    // 再跳转
    history.push('/new-job')
}

4. 修改NewJob的路由配置，把存储的任务信息作为prop传给组件：

<Route exact path="/new-job"
  render={(props) => <NewJob 
    jobName={jobName} 
    setMenuSelection={handleMenuSelection} 
    jobInfo={copyJobInfo}
  />}
/>

5. NewJob组件内直接通过props拿到jobInfo使用即可，使用完成后可以调用setCopyJobInfo(null)清空状态，避免下次进入页面重复触发逻辑。

内容的提问来源于stack exchange，提问作者ArthurJ