reactjs - React Router v6 中旧的 CreateBrowserHistory() 函数的替代方案

我想在我的应用程序的历史记录中推送一个新的路由，正如你所知道的，UseHistory() 钩子和 CreateBrowserHistory() 函数（用于创建用户自定义历史记录）已经在 6 版本中被移除。我知道我可以使用 UseNavigate 钩子并通过 Navigate() 函数来完成这项工作，但这个钩子不能在顶层调用，必须在 React 函数组件中调用。下面的代码展示了我们如何在 React Router 5.1 版本中实现这一功能：

将 history 传递给父组件，并导出相同的 history 对象以便在应用程序中任何地方使用：

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>
)

在应用程序的其他地方顶层使用导出的 history 对象：

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

如果我想在新版本的6中在顶层执行此操作，你建议什么？

答案＃1

在版本6中，按如下方式使用 useNavigate：

let navigate = useNavigate()

navigate('/not-found')

这个钩子不能在顶层调用，所以你可以将它传递给你想调用它的函数中的导航函数。