React withRouter的使用

withRouter的概述

withRouter是一个高阶组件（HOC），用于将路由相关的属性传递给包裹的非路由组件。当我们的组件没有被直接包裹在<Route>组件内时，无法通过props获取到路由相关的属性。这时，我们可以使用withRouter将这些属性注入到组件中，以便进行路由相关的操作。

使用withRouter

首先，确保您已经安装了react-router-dom库：

代码语言：javascript复制

npm install react-router-dom

接下来，让我们看一个使用withRouter的示例：

代码语言：javascript复制

import React from 'react';
import { BrowserRouter as Router, Route, Link, withRouter } from 'react-router-dom';

const Navbar = ({ location }) => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>Current Location: {location.pathname}</li>
      </ul>
    </nav>
  );
};

const NavbarWithRouter = withRouter(Navbar);

const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;

const App = () => {
  return (
    <Router>
      <NavbarWithRouter />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};

export default App;

在上面的示例中，我们定义了一个名为Navbar的组件，它显示了导航链接和当前页面的路径。在Navbar组件中，我们通过props获取了location属性，它是由withRouter注入的。

通过使用withRouter将Navbar组件包裹起来，我们可以在非路由组件中获取路由相关的属性。这样，我们就可以在Navbar组件中访问location.pathname，以显示当前页面的路径。

最后，我们在App组件中将NavbarWithRouter作为导航栏显示，并定义了两个路由，分别对应Home和About组件。

注意事项

使用withRouter时，需要注意以下几点：

withRouter应该在组件的外部使用，而不是在组件的内部使用。例如，const NavbarWithRouter = withRouter(Navbar)，而不是在组件的内部使用withRouter(Navbar)。
如果您正在使用React函数组件，可以使用React.memo将组件进行优化，以避免不必要的渲染。例如，const NavbarWithRouter = React.memo(withRouter(Navbar))。
如果您正在使用TypeScript，使用withRouter时可能需要进行类型注解，以确保获得正确的属性类型。例如，const NavbarWithRouter = withRouter<NavbarProps>(Navbar)。

react

0 人点赞