React Router 六步成型，引领你进入前端路由的新篇章

2024-01-30 11:55:33

在当今快节奏的网络世界中，用户期望网站或应用程序能够快速响应他们的操作，并在不同的页面或视图之间无缝切换。前端路由技术应运而生，它允许你构建单页面的应用程序，无需重新加载整个页面即可在不同的视图之间切换。React Router 是一个流行的前端路由库，专门为 React 框架设计，它提供了丰富的功能和直观的使用体验。

1. 安装 React Router

首先，你需要安装 React Router。你可以使用 npm 或 yarn 包管理器来安装它。

npm install react-router-dom

2. 配置路由

接下来，你需要配置路由。路由配置决定了应用程序中不同视图之间的映射关系。你可以使用 <BrowserRouter> 组件来配置路由。

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

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </BrowserRouter>
  );
};

export default App;

在这个例子中，我们配置了三个路由：

根路由（/）：指向主页组件（Home）
关于我们路由（/about）：指向关于我们组件（About）
联系我们路由（/contact）：指向联系我们组件（Contact）

3. 使用路由链接

你可以使用 <Link> 组件来创建路由链接。路由链接允许用户在不同的视图之间切换。

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

const Navbar = () => {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About Us</Link>
      <Link to="/contact">Contact Us</Link>
    </nav>
  );
};

export default Navbar;

4. 使用组件

你可以使用组件来表示应用程序中的不同视图。

import React from "react";

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
      <p>This is the home page.</p>
    </div>
  );
};

export default Home;

5. 传递参数

你可以使用 useParams() 钩子来传递参数。

import React, { useParams } from "react";

const ProductDetails = () => {
  const { productId } = useParams();

  return (
    <div>
      <h1>Product Details</h1>
      <p>Product ID: {productId}</p>
    </div>
  );
};

export default ProductDetails;

6. 使用路由守卫

你可以使用路由守卫来保护你的路由。

import React, { useEffect } from "react";
import { useHistory } from "react-router-dom";

const PrivateRoute = ({ component: Component, ...rest }) => {
  const history = useHistory();

  useEffect(() => {
    const user = localStorage.getItem("user");
    if (!user) {
      history.push("/login");
    }
  }, [history]);

  return <Component {...rest} />;
};

export default PrivateRoute;