掌握 React 路由：应用程序导航完整指南

1. React Router 简介

React Router 是一个用于在 React 应用程序中处理路由的库。它允许您的应用程序在不同的组件和视图之间导航，而无需重新加载整页，从而实现无缝的用户体验。

---

2. 基本设置

首先安装react-router-dom：

npm install react-router-dom

使用 BrowserRouter、Routes 和 Route 设置基本路由：

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

const Home = () => <h2 id="Home">Home</h2>;
const About = () => <h2 id="About">About</h2>;

const App = () => {
  return (
    <router>
      <nav>
        <link to="/">Home
        <link to="/about">About
      </nav>

      <routes>
        <route path="/" element="{<Home"></route>} />
        <route path="/about" element="{<About"></route>} />
      </routes>
    </router>
  );
};

export default App;

---

3. 嵌套路由

对于更复杂的应用程序，您可以嵌套路由。以下是如何在父组件中设置嵌套路由：

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

const Dashboard = () => <h2 id="Dashboard-Home">Dashboard Home</h2>;
const Profile = () => <h2 id="Your-Profile">Your Profile</h2>;

const DashboardLayout = () => {
  return (
    <div>
      <nav>
        <link to="/dashboard">Home
        <link to="/dashboard/profile">Profile
      </nav>
      <routes>
        <route path="/" element="{<Dashboard"></route>} />
        <route path="profile" element="{<Profile"></route>} />
      </routes>
    </div>
  );
};

const App = () => {
  return (
    <router>
      <routes>
        <route path="/dashboard/*" element="{<DashboardLayout"></route>} />
      </routes>
    </router>
  );
};

export default App;

---

4. 动态路由

动态路由允许您在 URL 中传递参数。以下是定义和访问动态路线的方法：

import { useParams } from 'react-router-dom';

const User = () => {
  const { id } = useParams();
  return <h2 id="User-ID-id">User ID: {id}</h2>;
};

const App = () => {
  return (
    <router>
      <nav>
        <link to="/user/1">User 1
        <link to="/user/2">User 2
      </nav>

      <routes>
        <route path="/user/:id" element="{<User"></route>} />
      </routes>
    </router>
  );
};

export default App;

---

5. 受保护路线

要实现受保护的路由，您可以创建自定义 PrivateRoute 组件：

import { Navigate, Outlet } from 'react-router-dom';

const useAuth = () => {
  const user = { loggedIn: true }; // Replace with actual auth logic
  return user && user.loggedIn;
};

const PrivateRoute = () => {
  const isAuth = useAuth();
  return isAuth ? <outlet></outlet> : <navigate to="/login"></navigate>;
};

const App = () => {
  return (
    <router>
      <routes>
        <route path="/login" element="{<Login"></route>} />
        <route path="/dashboard" element="{<PrivateRoute"></route>}>
          <route path="" element="{<Dashboard"></route>} />
        
      </routes>
    </router>
  );
};

export default App;

---

6. 程序化导航

有时，您可能希望以编程方式导航，例如在提交表单后。在 React Router v6 中使用 useNavigate 钩子：

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

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

  const handleLogin = () => {
    // Login logic here...
    navigate('/dashboard');
  };

  return (
    <div>
      <h2 id="Login">Login</h2>
      <button onclick="{handleLogin}">Login</button>
    </div>
  );
};

export default Login;

---

7. 404 页

通过创建包罗万象的路由来处理 404（未找到）错误：

const NotFound = () => <h2 id="Page-Not-Found">404 - Page Not Found</h2>;

const App = () => {
  return (
    <router>
      <routes>
        <route path="/" element="{<Home"></route>} />
        <route path="/about" element="{<About"></route>} />
        <route path="*" element="{<NotFound"></route>} />
      </routes>
    </router>
  );
};

export default App;

---

8. 性能考虑因素

对于大型应用程序，延迟加载路由可以提高性能。以下是如何使用 React.lazy() 和 Suspense 实现延迟加载：

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

const App = () => {
  return (
    <router>
      <suspense fallback="{<div">Loading...}>
        <routes>
          <route path="/" element="{<Home"></route>} />
          <route path="/about" element="{<About"></route>} />
        </routes>
      </suspense>
    </router>
  );
};

export default App;

---

以上是掌握 React 路由：应用程序导航完整指南的详细内容。更多信息请关注PHP中文网其他相关文章！