React 路由使用

2023-12-30 04:15:13

React 路由使用

React 路由是一个用于构建单页应用程序 (SPA) 的第三方库。它使您可以轻松地管理应用程序中的页面跳转，并为每个页面创建单独的组件。

安装

要在您的 React 项目中使用路由，您需要先安装 react-router-dom 包。您可以使用以下命令进行安装：

npm install react-router-dom

安装完成后，您就可以在您的项目中使用路由了。

简单路由

最简单的路由用法是使用 <Route> 组件。<Route> 组件接受两个属性：path 和 component。path 属性指定了该组件应该在哪个 URL 路径下被渲染，component 属性指定了应该被渲染的组件。

例如，以下代码定义了一个简单的路由，当用户访问 / 路径时，就会渲染 Home 组件：

import { Route, BrowserRouter } from "react-router-dom";
import Home from "./Home";

const App = () => {
  return (
    <BrowserRouter>
      <Route path="/" component={Home} />
    </BrowserRouter>
  );
};

export default App;

动态路由

您也可以使用动态路由来渲染不同的组件。动态路由允许您使用 URL 中的参数来指定要渲染的组件。

例如，以下代码定义了一个动态路由，当用户访问 /user/:id 路径时，就会渲染 User 组件，并将 id 参数传递给该组件：

import { Route, BrowserRouter } from "react-router-dom";
import User from "./User";

const App = () => {
  return (
    <BrowserRouter>
      <Route path="/user/:id" component={User} />
    </BrowserRouter>
  );
};

export default App;

路由跳转

您可以使用 useNavigate hook 来进行路由跳转。useNavigate hook 返回一个函数，该函数接受一个 URL 路径作为参数，并跳转到该路径。

例如，以下代码使用 useNavigate hook 来在用户点击按钮时跳转到 /user/1 路径：

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

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

  const handleClick = () => {
    navigate("/user/1");
  };

  return (
    <button onClick={handleClick}>Go to User 1</button>
  );
};

export default App;