TypeError: useNavigate is not a function when using react router 6-CodePudding

I am import the useNavigate when using react router v6 "react-router-dom": "^6.3.0" like this:

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

in the function, I am using this code to navigate:

{
      title: (
        <FormattedMessage
          id="pages.apps.cruise.channel.searchTable.subName"
          defaultMessage="Rule name"
        />
      ),
      dataIndex: 'sub_name',
      render: (dom, entity) => {
        return (
          <a
            onClick={() => {
              setCurrentRow(entity);
              const history = useNavigate();
              history("/app/cruise/article");
            }}
          >
            {dom}
          </a>
        );
      },
    },

but the browser shows error like this:

×
TypeError: useNavigate is not a function
_jsxDEV.onClick
.ant-design-pro/src/pages/apps/cruise/channel/index.tsx:207
  204 | <a
  205 |   onClick={() => {
  206 |     setCurrentRow(entity);
> 207 |     const history = useNavigate();
      | ^  208 |     history("/app/cruise/article");
  209 |   }}
  210 | >
View compiled
▶ 19 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

why did this happen? what should I do to fix this problem? I already tried to put this code on top of the function component:

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

const history = useNavigate();

still show error like this:

Unhandled Rejection (TypeError): useNavigate is not a function
(anonymous function)
.ant-design-pro/src/pages/apps/cruise/channel/index.tsx:20
  17 | import { SortOrder } from 'antd/lib/table/interface';
  18 | import { useNavigate } from 'react-router-dom';
  19 | 
> 20 | const history = useNavigate();
  21 | 
  22 | interface IChannelPageProps {
  23 |   channels: IChannelState
View compiled
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

CodePudding user response：

Is the component in the context of a route before calling useNavigate? If not, try to wrap the component that use useNavigate with a Route:

import { Route } from 'react-router-dom';
<Route path="/yourpath" component={YourCompenent} />

CodePudding user response：

I think you should wrap all the components inside the Router because the Router doesn't work outside it selfs. Try using <BrowserRouter> tag:

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

//then wrap all of these stuff.
<BrowserRouter>
   <--Your components placed in here-->
</BrowserRouter>

Faced this error once before, hope it will help you fix the problem