React Router

React Router#

React Router是React官方推荐的路由库，用于在React应用中实现页面导航和路由管理。它允许你根据URL的变化显示不同的组件，实现单页应用（SPA）的导航体验。

1. 安装React Router#

React Router有多个包，其中最常用的是react-router-dom，用于Web应用。

1
# 使用npm安装
2
npm install react-router-dom
3

4
# 使用yarn安装
5
yarn add react-router-dom
6

7
# 使用pnpm安装
8
pnpm add react-router-dom

2. 基本用法#

配置路由#

首先，你需要在应用的根组件中配置路由。

1
import React from 'react';
2
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
3
import Home from './Home';
4
import About from './About';
5
import Contact from './Contact';
6

7
function App() {
8
  return (
9
    <Router>
10
      <div>
11
        <nav>
12
          <ul>
13
            <li>
14
              <Link to="/">Home</Link>
15
            </li>
16
            <li>
17
              <Link to="/about">About</Link>
18
            </li>
19
            <li>
20
              <Link to="/contact">Contact</Link>
21
            </li>
22
          </ul>
23
        </nav>
24

25
        <Routes>
26
          <Route path="/" element={<Home />} />
27
          <Route path="/about" element={<About />} />
28
          <Route path="/contact" element={<Contact />} />
29
        </Routes>
30
      </div>
31
    </Router>
32
  );
33
}
34

35
export default App;

创建路由组件#

接下来，你需要创建对应的路由组件。

1
import React from 'react';
2

3
function Home() {
4
  return <h1>Home Page</h1>;
5
}
6

7
export default Home;
8

9
// About.jsx
10
import React from 'react';
11

12
function About() {
13
  return <h1>About Page</h1>;
14
}
15

16
export default About;
17

18
// Contact.jsx
19
import React from 'react';
20

21
function Contact() {
22
  return <h1>Contact Page</h1>;
23
}
24

25
export default Contact;

3. 路由参数#

路由参数允许你在URL中传递参数，例如用户ID、产品ID等。

配置带参数的路由#

1
import React from 'react';
2
import { BrowserRouter as Router, Routes, Route, Link, useParams } from 'react-router-dom';
3
import Home from './Home';
4
import User from './User';
5

6
function App() {
7
  return (
8
    <Router>
9
      <div>
10
        <nav>
11
          <ul>
12
            <li>
13
              <Link to="/">Home</Link>
14
            </li>
15
            <li>
16
              <Link to="/user/1">User 1</Link>
17
            </li>
18
            <li>
19
              <Link to="/user/2">User 2</Link>
20
            </li>
21
          </ul>
22
        </nav>
23

24
        <Routes>
25
          <Route path="/" element={<Home />} />
26
          <Route path="/user/:id" element={<User />} />
27
        </Routes>
28
      </div>
29
    </Router>
30
  );
31
}
32

33
export default App;

在组件中获取路由参数#

1
import React from 'react';
2
import { useParams } from 'react-router-dom';
3

4
function User() {
5
  // 使用useParams Hook获取路由参数
6
  const { id } = useParams();
7

8
  return <h1>User {id}</h1>;
9
}
10

11
export default User;

4. 嵌套路由#

嵌套路由允许你在一个路由组件中嵌套另一个路由组件，实现更复杂的导航结构。

配置嵌套路由#

1
import React from 'react';
2
import { BrowserRouter as Router, Routes, Route, Link, Outlet } from 'react-router-dom';
3
import Home from './Home';
4
import Dashboard from './Dashboard';
5
import Profile from './Profile';
6
import Settings from './Settings';
7

8
function App() {
9
  return (
10
    <Router>
11
      <div>
12
        <nav>
13
          <ul>
14
            <li>
15
              <Link to="/">Home</Link>
16
            </li>
17
            <li>
18
              <Link to="/dashboard">Dashboard</Link>
19
            </li>
20
          </ul>
21
        </nav>
22

23
        <Routes>
24
          <Route path="/" element={<Home />} />
25
          <Route path="/dashboard" element={<Dashboard />}>
26
            <Route path="profile" element={<Profile />} />
27
            <Route path="settings" element={<Settings />} />
28
          </Route>
29
        </Routes>
30
      </div>
31
    </Router>
32
  );
33
}
34

35
export default App;

创建父路由组件#

1
import React from 'react';
2
import { Link, Outlet } from 'react-router-dom';
3

4
function Dashboard() {
5
  return (
6
    <div>
7
      <h1>Dashboard</h1>
8
      <nav>
9
        <ul>
10
          <li>
11
            <Link to="profile">Profile</Link>
12
          </li>
13
          <li>
14
            <Link to="settings">Settings</Link>
15
          </li>
16
        </ul>
17
      </nav>
18
      {/* Outlet用于渲染子路由组件 */}
19
      <Outlet />
20
    </div>
21
  );
22
}
23

24
export default Dashboard;

创建子路由组件#

1
import React from 'react';
2

3
function Profile() {
4
  return <h2>Profile Page</h2>;
5
}
6

7
export default Profile;
8

9
// Settings.jsx
10
import React from 'react';
11

12
function Settings() {
13
  return <h2>Settings Page</h2>;
14
}
15

16
export default Settings;

5. 编程式导航#

编程式导航允许你通过代码而不是链接来导航到不同的路由。

使用useNavigate Hook#

1
import React from 'react';
2
import { useNavigate } from 'react-router-dom';
3

4
function Login() {
5
  const navigate = useNavigate();
6

7
  const handleLogin = () => {
8
    // 登录逻辑
9
    // 登录成功后导航到首页
10
    navigate('/');
11
  };
12

13
  return (
14
    <div>
15
      <h1>Login Page</h1>
16
      <button onClick={handleLogin}>Login</button>
17
    </div>
18
  );
19
}
20

21
export default Login;

导航到带参数的路由#

1
import React from 'react';
2
import { useNavigate } from 'react-router-dom';
3

4
function UserList() {
5
  const navigate = useNavigate();
6

7
  const navigateToUser = (id) => {
8
    navigate(`/user/${id}`);
9
  };
10

11
  return (
12
    <div>
13
      <h1>User List</h1>
14
      <button onClick={() => navigateToUser(1)}>User 1</button>
15
      <button onClick={() => navigateToUser(2)}>User 2</button>
16
    </div>
17
  );
18
}
19

20
export default UserList;

导航到上一页#

1
import React from 'react';
2
import { useNavigate } from 'react-router-dom';
3

4
function Detail() {
5
  const navigate = useNavigate();
6

7
  const goBack = () => {
8
    navigate(-1);
9
  };
10

11
  return (
12
    <div>
13
      <h1>Detail Page</h1>
14
      <button onClick={goBack}>Go Back</button>
15
    </div>
16
  );
17
}
18

19
export default Detail;

6. 路由守卫#

路由守卫用于控制路由的访问权限，例如需要登录才能访问的页面。

创建私有路由组件#

1
import React from 'react';
2
import { Route, Navigate } from 'react-router-dom';
3

4
// 模拟登录状态
5
const isLoggedIn = true;
6

7
function PrivateRoute({ element }) {
8
  return isLoggedIn ? element : <Navigate to="/login" />;
9
}
10

11
export default PrivateRoute;

使用私有路由#

1
import React from 'react';
2
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
3
import Home from './Home';
4
import Login from './Login';
5
import Dashboard from './Dashboard';
6
import PrivateRoute from './PrivateRoute';
7

8
function App() {
9
  return (
10
    <Router>
11
      <div>
12
        <nav>
13
          <ul>
14
            <li>
15
              <Link to="/">Home</Link>
16
            </li>
17
            <li>
18
              <Link to="/login">Login</Link>
19
            </li>
20
            <li>
21
              <Link to="/dashboard">Dashboard</Link>
22
            </li>
23
          </ul>
24
        </nav>
25

26
        <Routes>
27
          <Route path="/" element={<Home />} />
28
          <Route path="/login" element={<Login />} />
29
          <Route path="/dashboard" element={<PrivateRoute element={<Dashboard />} />} />
30
        </Routes>
31
      </div>
32
    </Router>
33
  );
34
}
35

36
export default App;

7. 路由状态#

路由状态允许你在导航时传递额外的状态信息，这些信息不会显示在URL中。

导航时传递状态#

1
import React from 'react';
2
import { Link, useLocation } from 'react-router-dom';
3

4
function Home() {
5
  return (
6
    <div>
7
      <h1>Home Page</h1>
8
      <Link to="/dashboard" state={{ from: 'home', message: 'Welcome to Dashboard' }}>
9
        Go to Dashboard
10
      </Link>
11
    </div>
12
  );
13
}
14

15
function Dashboard() {
16
  const location = useLocation();
17
  const { from, message } = location.state || {};
18

19
  return (
20
    <div>
21
      <h1>Dashboard</h1>
22
      {from && <p>From: {from}</p>}
23
      {message && <p>Message: {message}</p>}
24
    </div>
25
  );
26
}

8. 404页面#

404页面用于处理不存在的路由。

配置404页面#

1
import React from 'react';
2
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
3
import Home from './Home';
4
import About from './About';
5
import NotFound from './NotFound';
6

7
function App() {
8
  return (
9
    <Router>
10
      <div>
11
        <nav>
12
          <ul>
13
            <li>
14
              <Link to="/">Home</Link>
15
            </li>
16
            <li>
17
              <Link to="/about">About</Link>
18
            </li>
19
            <li>
20
              <Link to="/nonexistent">Nonexistent Page</Link>
21
            </li>
22
          </ul>
23
        </nav>
24

25
        <Routes>
26
          <Route path="/" element={<Home />} />
27
          <Route path="/about" element={<About />} />
28
          {/* 404页面，放在所有路由的最后 */}
29
          <Route path="*" element={<NotFound />} />
30
        </Routes>
31
      </div>
32
    </Router>
33
  );
34
}
35

36
export default App;

创建404组件#

1
import React from 'react';
2
import { Link } from 'react-router-dom';
3

4
function NotFound() {
5
  return (
6
    <div>
7
      <h1>404 - Page Not Found</h1>
8
      <p>The page you are looking for does not exist.</p>
9
      <Link to="/">Go back to Home</Link>
10
    </div>
11
  );
12
}
13

14
export default NotFound;

9. 最佳实践#

使用BrowserRouter：对于大多数Web应用，推荐使用BrowserRouter，它使用HTML5的history API，提供更干净的URL。
组织路由结构：将路由配置集中管理，便于维护和扩展。
使用嵌套路由：对于复杂的应用，使用嵌套路由可以更好地组织组件结构。
使用路由守卫：对于需要权限控制的页面，使用路由守卫来限制访问。
使用编程式导航：对于需要通过代码触发的导航，使用useNavigate Hook。
处理404页面：为不存在的路由提供友好的404页面。
使用路由状态：对于不需要显示在URL中的状态信息，使用路由状态。
优化路由性能：对于大型应用，考虑使用懒加载来优化路由性能。

练习#

创建一个包含首页、关于页、联系页的基本路由应用。
创建一个包含用户列表和用户详情的应用，使用路由参数传递用户ID。
创建一个包含嵌套路由的仪表盘应用，包含个人资料和设置页面。
创建一个需要登录才能访问的私有路由。
创建一个404页面，处理不存在的路由。

总结#

在本章节中，我们学习了React Router的使用方法和最佳实践，包括：

安装和配置React Router
基本路由的使用
路由参数的传递和获取
嵌套路由的配置和使用
编程式导航的实现
路由守卫的使用
路由状态的传递和获取
404页面的处理
最佳实践

React Router是React应用中实现页面导航和路由管理的重要工具，掌握它的使用方法将帮助你构建更加复杂和用户友好的React应用。

Lovely firefly!