【React】如何更好的在组件中使用浏览器的history属性

在 React Router v5 中，可以通过高阶组件（Higher-Order Component, HOC）来将 history 属性注入到子组件中，以便管理浏览器的导航。在 React Router v6 中，不推荐使用 HOC，而推荐使用 useNavigate 钩子。

1. 使用 React Router v5 实现 withRouter 高阶组件

安装 React Router v5

首先，确保安装了 React Router v5：

npm install react-router-dom@5

创建 withRouter.js

withRouter 高阶组件将 history、location 和 match 属性传递给子组件。

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

const withRouterHOC = (WrappedComponent) => {
  const ComponentWithRouter = (props) => {
    const { history, location, match } = props;
    return <WrappedComponent history={history} location={location} match={match} {...props} />;
  };

  return withRouter(ComponentWithRouter);
};

export default withRouterHOC;

使用 withRouterHOC

创建一个示例组件 MyComponent，并使用 withRouterHOC 将 history 属性注入到组件中。

// src/pages/MyComponent.js
import React from 'react';

const MyComponent = ({ history }) => {
  const goToHome = () => {
    history.push('/');
  };

  return (
    <div>
      <h1>My Component</h1>
      <button onClick={goToHome}>Go to Home</button>
    </div>
  );
};

export default MyComponent;

将组件与 withRouterHOC 结合使用：

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import withRouterHOC from './withRouterHOC';
import MyComponent from './pages/MyComponent';
import Home from './pages/Home';

const MyComponentWithRouter = withRouterHOC(MyComponent);

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/my-component" component={MyComponentWithRouter} />
      </Switch>
    </Router>
  );
};

export default App;

创建 Home 组件

// src/pages/Home.js
import React from 'react';

const Home = () => {
  return <div>Home Page</div>;
};

export default Home;

2. 使用 React Router v6 的替代方案

在 React Router v6 中，不推荐使用 HOC，而推荐使用 useNavigate 钩子。以下是一个示例，展示了如何在 React Router v6 中管理浏览器的导航：

安装 React Router v6

首先，确保安装了 React Router v6：

npm install react-router-dom@6

使用 useNavigate 钩子

创建一个示例组件 MyComponent，并使用 useNavigate 钩子来管理浏览器的导航。

// src/pages/MyComponent.js
import React from 'react';
import { useNavigate } from 'react-router-dom';

const MyComponent = () => {
  const navigate = useNavigate();

  const goToHome = () => {
    navigate('/');
  };

  return (
    <div>
      <h1>My Component</h1>
      <button onClick={goToHome}>Go to Home</button>
    </div>
  );
};

export default MyComponent;

配置路由

在 App.js 中配置路由：

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import MyComponent from './pages/MyComponent';
import Home from './pages/Home';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/my-component" element={<MyComponent />} />
      </Routes>
    </Router>
  );
};

export default App;

总结

• 在React Router v5示例中，我们创建了一个 withRouterHOC 高阶组件，用于将 history、location 和 match 属性传递给被包装的组件。通过这种方式，可以在任何需要的地方使用 history 属性来管理浏览器的导航。
• 使用 React Router v6 和 useNavigate 钩子，代码更加简洁和现代化。如果可能，建议使用 React Router v6 来管理路由和导航。