一、什麼是React History

React History 是 React 官方提供的一款路由管理工具，主要用於幫助 React 應用實現路由跳轉和管理。

相較於 React 自帶的路由功能，React History 更為簡介，易於上手。它提供了豐富的路由管理 API，可以讓我們在項目中更加靈活地使用路由。

二、React History的使用

在 React 項目中使用 React History 非常簡單，只需按照以下步驟即可：

1.安裝 React History

    // 使用 npm
    npm install --save history

    // 使用 yarn
    yarn add history

2.創建 Router

創建 Router 是使用 React History 的第一步，我們可以使用 BrowserRouter、HashRouter、MemoryRouter 或 StaticRouter。

下面是一個基於 BrowserRouter 的實例：

    import React from 'react';
    import { BrowserRouter as Router, Route } from 'react-router-dom';
    import Home from './Home';
    import About from './About';

    function App() {
      return (
        
          
          
        
      );
    }

    export default App;

上述代碼通過創建 BrowserRouter，為項目添加了兩個路由：”/”和”/about”。當用戶訪問這兩個路由時，對應的組件將會被渲染。

3.Link組件

Link 組件是 React History 提供的一個組件，用於在應用中實現路由跳轉。它類似於 a 標籤，在點擊時可以跳轉到指定的路由。

下面是一個基於 Link 組件的實例：

    import React from 'react';
    import { Link } from 'react-router-dom';

    function Navigation() {
      return (
        
      );
    }

    export default Navigation;

上述代碼通過創建 Link 組件，為項目添加了兩個路由鏈接：”/”和”/about”。

4.編程式導航

使用編程式導航，可以在代碼中直接跳轉到指定的路由。

import React from 'react';

import { useHistory } from 'react-router-dom';
 function Home() {
 const history = useHistory();
 function handleClick() {
 history.push('/about');
 }
 return (
Home
  Go to About
原創文章，作者：NYRPA，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/334531.html