reactjs - Alternativa à antiga função CreateBrowserHistory() no React Router v6

Quero adicionar uma nova rota no histórico do meu aplicativo e, como você sabe, o hook UseHistory() e a função CreateBrowserHistory() (para criar um histórico definido pelo usuário) foram removidos na nova versão 6. Sei que posso usar o hook UseNavigate e fazer esse trabalho com a função Navigate(), mas esse hook não pode ser chamado no nível superior e deve ser chamado em um componente de função do React. Os códigos abaixo mostram como poderíamos fazer isso com a versão 5.1 do React Router:

Passando o history para o componente pai e exportando o mesmo objeto history para usá-lo em qualquer lugar na Aplicação:

import React from 'react'
import { Router } from 'react-router-dom'
import { createBrowserHistory } from 'history' // which comes along with React-Router

export const history = createBrowserHistory();

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
    <Router history={history}>
        <App />
    </Router>
)

Usando o objeto history exportado em outro lugar da Aplicação no nível superior:

switch (status) {
    case 404:
        history.push('/not-found');
        break

se eu quiser fazer isso no nível superior na nova versão do 6, o que você recomenda?

Resposta #1

Na versão 6, use useNavigate como abaixo:

let navigate = useNavigate()

navigate('/not-found')

este hook não pode ser chamado no nível superior, então você pode passá-lo para a função navigate para a função onde você quer chamá-lo.