javascript - how to use history instance while using react routers v6? - Stack Overflow

admin管理员组

文章数量:1342504

I'm using react-router v6 and I have to use history instance.

I've installed it using

yarn add history react-router-dom@next

One way of using history instance I guess it must be with v5 is to use useHistory hook imported from react-router-dom

this code is running fine with v5 but with v6 it is not working

import { useHistory } from "react-router-dom";

const history = useHistory();

const onRedirectCallback = (appState) => {
        history.push(appState?.returnTo || window.location.pathname);
};

with v6 version, I'm having this error

Attempted import error: 'useHistory' is not exported from 'react-router-dom'.

I'm using react-router v6 and I have to use history instance.

I've installed it using

yarn add history react-router-dom@next

One way of using history instance I guess it must be with v5 is to use useHistory hook imported from react-router-dom

this code is running fine with v5 but with v6 it is not working

import { useHistory } from "react-router-dom";

const history = useHistory();

const onRedirectCallback = (appState) => {
        history.push(appState?.returnTo || window.location.pathname);
};

with v6 version, I'm having this error

Attempted import error: 'useHistory' is not exported from 'react-router-dom'.

• javascript
• reactjs
• react-router
• react-router-dom

Share Improve this question Follow asked Aug 26, 2020 at 12:01 Omama ZainabOmama Zainab 88055 gold badges1515 silver badges2727 bronze badges 1

• 1 github./ReactTraining/react-router/blob/dev/docs/… – evgeni fotia Commented Aug 26, 2020 at 12:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You need to use useNavigate hook and new navigate API.

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

const navigate = useNavigate();

const onRedirectCallback = (appState) => {
        navigate(appState?.returnTo || window.location.pathname);
};

// import

const { useNavigate } from 'react-router-dom'

const navigate = useNavigate()

navigate({ pathname: './webpage/path' }) 

navigate({ pathname: './webpage/path' }, { replace: true })

本文标签： javascripthow to use history instance while using react routers v6Stack Overflow