react-router 学习笔记

react-router 是 React 的一款路由库，用于管理前端路由，可以帮助开发者实现单页应用和多页应用的路由跳转、页面渲染等功能。在本文中，我将从如何使用 react-router 开始，逐步深入探讨 react-router 的使用方法和应用场景。

1. 如何使用 react-router

使用 react-router 首先要安装 react-router-dom，可以通过 npm 进行安装：

npm install react-router-dom

引入 react-router-dom 后，可以在 App.js 中定义多个路由对应的组件：

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

这里使用 BrowserRouter 作为路由器，Switch 用于切换路由，Route 定义每个路由对应的组件，并且精确匹配路由路径。

其中，exact 关键字用于精确匹配根路由，如果不加 exact，则 /about 会同时匹配 / 和 /about，可能会导致路由渲染出错。

2. 动态路由

动态路由是指在路由路径中传递参数，例如打开商品详情页：

<Route path="/product/:id" component={ProductDetail} />

其中，id 是动态参数，可以使用 props.match.params.id 获取到当前路由的 id 值。

3. 嵌套路由

有时候需要在一个路由下嵌套多个子路由，例如在个人中心页面有“我的订单”、“我的信息”等多个子页面，则可以使用嵌套路由来实现：

<Route path="/user" component={User}>
    <Route path="/user/orders" component={Orders} />
    <Route path="/user/profile" component={Profile} />
</Route>

其中，User 组件是父级路由，Orders 和 Profile 是子路由，在 User 组件中可以使用 props.children 来渲染子路由。

4. 路由跳转

在页面中可以使用 Link 组件来实现路由跳转：

import { Link } from "react-router-dom";

<Link to="/about">关于我们</Link>

如果需要在代码中进行路由跳转，则需要使用 withRouter 将组件包裹一层，使用 props.history.push 来进行路由跳转：

import { withRouter } from "react-router-dom";

class Home extends React.Component {
  handleClick = () => {
    this.props.history.push("/about");
  };
  
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>跳转到关于我们</button>
      </div>
    );
  }
}

export default withRouter(Home);

5. 路由守卫

路由守卫是指在路由跳转前进行拦截，例如未登录的用户无法访问某些页面等。可以使用 react-router-dom 中提供的 Redirect 和 Route 组件来实现路由守卫：

import { Route, Redirect } from "react-router-dom";

function PrivateRoute({ component: Component, ...rest }) {
  const isLoggedIn = true; // 根据实际情况编写登录状态获取逻辑
  
  return (
    <Route
      {...rest}
      render={(props) =>
        isLoggedIn ? (
          <Component {...props} />
        ) : (
          <Redirect to={{ pathname: "/login", state: { from: props.location } }} />
        )
      }
    />
  );
}

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <PrivateRoute path="/page" component={Page} />
    </Switch>
  </Router>
);

6. 总结

以上是 react-router 的主要用法和应用场景。react-router 提供了强大的路由管理功能，可以帮助开发者更好地实现前端路由跳转和页面渲染等功能。学习 react-router 的过程中，可以通过实践提高自己的技能水平，理解前端路由实现的原理，从而更好地应用 react-router 于实际项目中。