迁移依赖后调用navigate报错：navigate is not a function

你遇到的Unhandled Rejection (TypeError): navigate is not a function错误，核心原因是React Router v6彻底移除了通过组件props传递navigate的方式——这是v5及更早版本的用法，升级到v6后该写法直接失效。

React Router v6改用useNavigate钩子来获取导航能力，只需两步修改代码：

• 从react-router-dom导入useNavigate钩子
• 在组件内部调用该钩子得到navigate函数，不再依赖props传递

import axios from 'axios'
import React, { useState } from 'react'
import { Container, Form, Button } from 'react-bootstrap'
// 新增：导入useNavigate钩子
import { useNavigate } from 'react-router-dom'

// 移除props中的navigate参数
const AddProduct = () => {
    const [title, setTitle] = useState('')
    const [price, setPrice] = useState(0)
    const [description, setDescription] = useState('')
    const [published, setPublished] = useState(true)
    const [image, setImage] = useState('')
    // 新增：获取导航函数
    const navigate = useNavigate()

    const addProductHandler = async (e) => {
        e.preventDefault()

        const formData = new FormData()

        formData.append('image', image)
        formData.append('title', title)
        formData.append('price', price)
        formData.append('description', description)
        formData.append('published', published)

        await axios.post('/api/products/addProduct', formData)
        // 导航逻辑保持不变
        navigate('/products')
    }

    return (
        <Container>
            <Form onSubmit={addProductHandler}>
                <Form.Group controlId="title">
                    <Form.Label>产品标题</Form.Label>
                    <Form.Control
                        type="text"
                        value={title}
                        onChange={(e) => setTitle(e.target.value)}
                    />
                </Form.Group>
                <Form.Group controlId="price">
                    <Form.Label>产品价格</Form.Label>
                    <Form.Control
                        type="number"
                        value={price}
                        onChange={(e) => setPrice(Number(e.target.value))}
                    />
                </Form.Group>
                <Form.Group controlId="description">
                    <Form.Label>产品描述</Form.Label>
                    <Form.Control
                        as="textarea"
                        value={description}
                        onChange={(e) => setDescription(e.target.value)}
                    />
                </Form.Group>
                <Form.Group controlId="published">
                    <Form.Check
                        type="checkbox"
                        label="发布状态"
                        checked={published}
                        onChange={(e) => setPublished(e.target.checked)}
                    />
                </Form.Group>
                <Form.Group controlId="image">
                    <Form.Label>产品图片</Form.Label>
                    <Form.Control
                        type="file"
                        onChange={(e) => setImage(e.target.files[0])}
                    />
                </Form.Group>
                <Button variant="primary" type="submit" className="mt-3">
                    添加产品
                </Button>
            </Form>
        </Container>
    )
}

export default AddProduct

• 确保AddProduct组件是通过React Router的<Route>渲染的（例如<Route path="/add-product" element={<AddProduct />} />），useNavigate钩子才能正常生效。
• 整个应用必须被BrowserRouter（或其他Router组件）包裹，否则钩子会抛出错误。

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