React Router Dom中Navigate组件无法跳转至/keyword路由求助

你遇到的核心问题是：<Navigate>是React组件，只有作为JSX被渲染时才会触发路由跳转，你在fetchQuery函数里只是创建了组件实例，但没有将它加入渲染流程，所以完全不会生效。

针对React类组件，有两种靠谱的解决方式：

方式一：使用withRouter高阶组件注入路由历史对象 #

这是类组件中处理编程式导航的标准方案：

1. 修改Navbar.js的导入和导出：

import React, { Component } from 'react'
import { Link, withRouter } from "react-router-dom" // 替换Navigate为withRouter

export default withRouter(Navbar); // 用withRouter包裹组件导出

2. 修改fetchQuery函数，直接调用history对象的跳转方法：

fetchQuery = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const searchText = formData.get('search');
    console.log(searchText)
    // 用setState的回调确保状态更新后再跳转
    this.props.setQuery(searchText, () => {
        this.props.history.replace("/keyword"); // 执行跳转
    });
}

3. 同时修改App.js中的setQuery方法，支持回调函数：

setQuery = (q, callback) => {
    this.setState({ query: q }, callback);
}

方式二：通过父组件状态驱动<Navigate>渲染 #

如果不想用高阶组件，可以在App组件中通过状态控制是否渲染跳转组件：

1. 修改App.js的state和方法：

constructor() {
    super();
    this.state = {
        country: "in",
        query: "",
        needNavigate: false, // 新增跳转状态
        targetRoute: ""
    }
}

setQuery = (q) => {
    this.setState({ 
        query: q,
        needNavigate: true,
        targetRoute: "/keyword"
    });
}

2. 在App的render中添加跳转逻辑：

render() {
    const { needNavigate, targetRoute } = this.state;
    return (
        <>
            <Router>
                {needNavigate && <Navigate to={targetRoute} replace={true} />}
                <Navbar setQuery={this.setQuery} />
                <Routes>
                    {/* 原路由配置不变 */}
                </Routes>
            </Router>
        </>
    )
}

额外注意点 #

• 优先推荐方式一，withRouter是react-router-dom专门为类组件提供的编程式导航方案，逻辑更直接。
• 跳转前确保query状态已经更新，所以用setState的回调或者异步处理，避免News组件拿到旧的查询值。

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