已解决:使用 History React Router v6 应用程序

使用 History React Router v6 的主要问题是它不支持基于哈希的路由。 这意味着所有 URL 都必须是绝对路径,这会使管理和维护应用程序变得困难。 此外,没有对动态路由的内置支持,这在创建具有多个页面的复杂应用程序时可能是个问题。 最后,History React Router v6 不提供对服务器端渲染的任何支持,这在某些情况下可能是必需的。

import {
  BrowserRouter as Router,
  Switch,
  Route,
  useHistory,
} from "react-router-dom";

 function App() {

   const history = useHistory();

   // Handle a button click to push a new entry onto the history stack.
   function handleClick() {
     history.push("/new-location");
   }

   return (
     <div>      
       <button type="button" onClick={handleClick}>Go to New Location</button>       

       <Switch>        
         <Route path="/new-location">          
           <NewLocation />        
         </Route>      

       </Switch>    

     </div>   ); }

// 此代码从 react-router-dom 库中导入 BrowserRouter、Switch、Route 和 useHistory 组件。
// 然后它创建一个名为 App 的函数,该函数使用 useHistory 挂钩来创建一个历史对象。
// 这个历史对象在一个名为 handleClick 的函数中使用,该函数在调用时将一个新条目推送到历史堆栈中。
// App 函数然后返回一些 JSX,其中包括一个带有 onClick 处理程序的按钮,单击时调用 handleClick。
// 最后,有一个 Switch 组件,其中有一个 Route 组件,当它的路径匹配“/new-location”时渲染 NewLocation 组件。

什么是useHistory

useHistory 是 React Router 提供的 React Hook,它允许组件访问历史对象以便以编程方式导航。 它可用于将新位置推送到历史堆栈、替换当前位置、在历史中来回移动等。

我如何在反应中获取路线历史记录

在 React Router 中,您可以使用 useHistory hook 获取路由历史记录。 这个挂钩可以访问历史实例,您可以使用它来导航、在应用程序的历史记录中来回移动等等。 要使用它,只需从 React Router 导入钩子,然后在您的组件中调用它:

从'react-router-dom'导入{useHistory};

const MyComponent = () => {
const 历史 = useHistory();

// 现在您可以通过 `history` 对象访问路由历史记录。

返回 (…);
}

React router 是否使用 history API

是的,React Router 使用 HTML5 History API 来跟踪当前位置及其历史记录。 这允许 React Router 更新页面而无需重新加载它,从而使导航更快更流畅。 History API 还允许深度链接,这使用户可以更轻松地共享将他们直接带到应用程序中特定页面的链接。

相关文章:

发表评论