React Router点击Link不跳转、无法挂载目标组件问题求助

问题核心原因 #

• 你在Link的点击事件中调用了event.preventDefault()，直接阻止了Link的默认跳转行为，这是页面无法跳转的最直接原因
• SearchFlights组件内部冗余嵌套了<Router>、<Switch>和<Route>，和App.js外层的路由配置冲突，导致路由匹配异常
• 异步请求逻辑和跳转逻辑的时序不对，你需要等搜索接口请求完成拿到结果后再跳转，直接用Link默认跳转无法控制时序，也不方便传递搜索结果参数

修复步骤 #

1. 移除SearchFlights组件内冗余的路由相关代码 #

删掉SearchFlights组件return里的<Router>、<Switch>、<Route>标签，这部分配置已经在App.js里完成，嵌套路由会导致冲突。

2. 替换Link为普通按钮，使用编程式跳转控制时序+传参 #

你用的是React Router v5，所以用useHistory实现编程式跳转：
首先在SearchFlights组件顶部引入hook：

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

然后在组件内实例化：

const history = useHistory()

修改handleClick逻辑，直接不用Link，换成普通button控制流程：

// 把原来的Link替换为普通按钮
<button onClick={handleClick}> Search Flight </button>

修改handleClick和useEffect逻辑，请求完成后跳转并传参：

function handleClick(event) {
    event.preventDefault()
    axios.post('http://localhost:3001/searchflight', obj).then(() => {
        console.log("yes")
        setSendRequest(true);
    }).catch(err => {
        console.log(err)
    })
}

useEffect(() => {
    if(!sendRequest) return
    axios.get('http://localhost:3001/getresults').then((response) => {
        const results = response.data
        // 请求成功后跳转到结果页，把搜索结果通过state参数传递
        history.push({
            pathname: '/getresults',
            state: { searchResults: results }
        })
    }).catch(err => {
        console.log(err)
    })
}, [sendRequest, history])

3. 在SearchResults组件中接收传递的参数 #

在SearchResults组件内可以直接从props中拿到传递的搜索结果：

// 函数组件写法
function SearchResults(props) {
    const searchResults = props.location.state?.searchResults
    // 后续渲染逻辑直接用这个结果即可
}

额外优化点 #

• 你所有搜索状态的初始值设为0不合理，应该设为空字符串''，不然用户输入前提交的参数会带0，可能导致后端查询异常
• useEffect里打印searchResults拿不到最新值是因为setState是异步的，要打印最新值直接打response.data即可

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