行业资讯

react-router-dom入门使用实例分析

发布时间：2022-08-10 16:30:38 作者：iii
来源：亿速云 阅读：213

React Router DOM 入门使用实例分析

引言

在现代的前端开发中，单页应用（SPA）已经成为主流。SPA 的核心思想是通过 JavaScript 动态地更新页面内容，而不是每次请求都从服务器加载新的 HTML 页面。为了实现这一目标，前端路由管理变得至关重要。React Router DOM 是 React 生态系统中最流行的路由管理库之一，它提供了强大的路由功能，使得开发者能够轻松地在 React 应用中实现页面导航和状态管理。

本文将深入探讨 React Router DOM 的基本概念、核心功能以及实际应用实例，帮助读者快速掌握这一强大的工具。

1. React Router DOM 简介

1.1 什么是 React Router DOM？

React Router DOM 是 React Router 的一个子库，专门用于在浏览器环境中管理路由。它提供了一系列组件和 API，使得开发者能够在 React 应用中实现页面导航、路由匹配、参数传递等功能。

1.2 为什么选择 React Router DOM？

2. 安装与基本配置

2.1 安装 React Router DOM

首先，确保你已经创建了一个 React 项目。如果没有，可以使用 create-react-app 快速创建一个新的 React 项目。

npx create-react-app my-app
cd my-app

接下来，安装 React Router DOM：

npm install react-router-dom

2.2 基本配置

在 src/index.js 或 src/App.js 中引入 BrowserRouter 组件，并将其包裹在应用的根组件外部。

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

3. 基本路由配置

3.1 使用 Route 组件

Route 组件是 React Router DOM 的核心组件之一，用于定义路由规则。它接受两个主要属性：

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

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

export default App;

3.2 使用 Switch 组件

Switch 组件用于包裹多个 Route 组件，确保只有一个 Route 会被渲染。当 Switch 找到一个匹配的 Route 后，它将停止继续匹配其他 Route。

3.3 使用 exact 属性

exact 属性用于确保 Route 只有在路径完全匹配时才会渲染对应的组件。例如，<Route exact path="/" component={Home} /> 只有在路径为 / 时才会渲染 Home 组件。

4. 导航与链接

4.1 使用 Link 组件

Link 组件用于在应用中创建导航链接。它类似于 HTML 中的 <a> 标签，但不会导致页面刷新。

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

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

export default Navbar;

4.2 使用 NavLink 组件

NavLink 是 Link 的一个扩展，它允许你在当前激活的链接上添加样式或类名。

import React from 'react';
import { NavLink } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <NavLink to="/" exact activeClassName="active">
            Home
          </NavLink>
        </li>
        <li>
          <NavLink to="/about" activeClassName="active">
            About
          </NavLink>
        </li>
        <li>
          <NavLink to="/contact" activeClassName="active">
            Contact
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

export default Navbar;

4.3 使用 useHistory Hook

useHistory Hook 提供了对浏览器历史记录的访问，允许你以编程的方式进行导航。

import React from 'react';
import { useHistory } from 'react-router-dom';

function Home() {
  const history = useHistory();

  const handleClick = () => {
    history.push('/about');
  };

  return (
    <div>
      <h1>Home</h1>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
}

export default Home;

5. 动态路由与参数传递

5.1 动态路由

动态路由允许你在 URL 中传递参数。例如，你可以定义一个动态路由 /user/:id，其中 :id 是一个动态参数。

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import User from './components/User';

function App() {
  return (
    <div>
      <Switch>
        <Route path="/user/:id" component={User} />
      </Switch>
    </div>
  );
}

export default App;

5.2 获取路由参数

在 User 组件中，你可以使用 useParams Hook 来获取路由参数。

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

function User() {
  const { id } = useParams();

  return (
    <div>
      <h1>User ID: {id}</h1>
    </div>
  );
}

export default User;

5.3 查询参数

除了动态路由参数，你还可以通过 useLocation Hook 获取查询参数。

import React from 'react';
import { useLocation } from 'react-router-dom';

function User() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const name = queryParams.get('name');

  return (
    <div>
      <h1>User Name: {name}</h1>
    </div>
  );
}

export default User;

6. 嵌套路由

6.1 定义嵌套路由

嵌套路由允许你在一个路由组件内部定义子路由。例如，你可以在 /user/:id 路由下定义 /user/:id/profile 和 /user/:id/settings 子路由。

import React from 'react';
import { Route, Switch, useRouteMatch } from 'react-router-dom';
import UserProfile from './components/UserProfile';
import UserSettings from './components/UserSettings';

function User() {
  const { path } = useRouteMatch();

  return (
    <div>
      <h1>User</h1>
      <Switch>
        <Route exact path={`${path}/profile`} component={UserProfile} />
        <Route path={`${path}/settings`} component={UserSettings} />
      </Switch>
    </div>
  );
}

export default User;

6.2 使用 useRouteMatch Hook

useRouteMatch Hook 用于获取当前路由的匹配信息，包括路径、URL 和参数等。

7. 重定向与 404 页面

7.1 使用 Redirect 组件

Redirect 组件用于在路由匹配时重定向到另一个路径。

import React from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

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

export default App;

7.2 处理 404 页面

你可以通过定义一个没有 path 属性的 Route 组件来处理 404 页面。

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';

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

export default App;

8. 高级功能

8.1 使用 withRouter HOC

withRouter 是一个高阶组件（HOC），它允许你将路由相关的 props（如 history、location 和 match）注入到任何组件中。

import React from 'react';
import { withRouter } from 'react-router-dom';

function MyComponent({ history, location, match }) {
  return (
    <div>
      <h1>My Component</h1>
      <p>Current Path: {location.pathname}</p>
      <button onClick={() => history.push('/about')}>Go to About</button>
    </div>
  );
}

export default withRouter(MyComponent);

8.2 使用 Prompt 组件

Prompt 组件用于在用户离开当前页面时显示确认对话框。你可以通过设置 when 属性来控制是否显示提示。

import React, { useState } from 'react';
import { Prompt } from 'react-router-dom';

function MyForm() {
  const [isDirty, setIsDirty] = useState(false);

  const handleInputChange = (e) => {
    setIsDirty(true);
  };

  return (
    <div>
      <h1>My Form</h1>
      <input type="text" onChange={handleInputChange} />
      <Prompt when={isDirty} message="Are you sure you want to leave?" />
    </div>
  );
}

export default MyForm;

8.3 使用 useRouteMatch 和 useParams 组合

useRouteMatch 和 useParams 可以组合使用，以获取嵌套路由中的参数。

import React from 'react';
import { useRouteMatch, useParams } from 'react-router-dom';

function UserProfile() {
  const { id } = useParams();
  const { path } = useRouteMatch();

  return (
    <div>
      <h1>User Profile: {id}</h1>
      <p>Current Path: {path}</p>
    </div>
  );
}

export default UserProfile;

9. 实际应用实例

9.1 创建一个简单的博客应用

让我们通过一个简单的博客应用来演示 React Router DOM 的实际应用。

9.1.1 项目结构

my-app/
├── src/
│   ├── components/
│   │   ├── Home.js
│   │   ├── About.js
│   │   ├── Contact.js
│   │   ├── Blog.js
│   │   ├── Post.js
│   │   └── Navbar.js
│   ├── App.js
│   └── index.js
├── public/
└── package.json

9.1.2 实现代码

App.js

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import Blog from './components/Blog';
import Post from './components/Post';
import Navbar from './components/Navbar';

function App() {
  return (
    <div>
      <Navbar />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route exact path="/blog" component={Blog} />
        <Route path="/blog/:id" component={Post} />
      </Switch>
    </div>
  );
}

export default App;

Navbar.js

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

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
        <li>
          <Link to="/blog">Blog</Link>
        </li>
      </ul>
    </nav>
  );
}

export default Navbar;

Blog.js

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

function Blog() {
  const posts = [
    { id: 1, title: 'Post 1' },
    { id: 2, title: 'Post 2' },
    { id: 3, title: 'Post 3' },
  ];

  return (
    <div>
      <h1>Blog</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link to={`/blog/${post.id}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Blog;

Post.js

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

function Post() {
  const { id } = useParams();

  return (
    <div>
      <h1>Post {id}</h1>
      <p>This is the content of post {id}.</p>
    </div>
  );
}

export default Post;

9.2 创建一个带有身份验证的仪表盘应用

让我们通过一个带有身份验证的仪表盘应用来演示 React Router DOM 的高级功能。

9.2.1 项目结构

my-app/
├── src/
│   ├── components/
│   │   ├── Login.js
│   │   ├── Dashboard.js
│   │   ├── Profile.js
│   │   ├── Settings.js
│   │   └── Navbar.js
│   ├── App.js
│   └── index.js
├── public/
└── package.json

9.2.2 实现代码

App.js

import React, { useState } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Login from './components/Login';
import Dashboard from './components/Dashboard';
import Navbar from './components/Navbar';

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const handleLogin = () => {
    setIsAuthenticated(true);
  };

  const handleLogout = () => {
    setIsAuthenticated(false);
  };

  return (
    <div>
      <Navbar isAuthenticated={isAuthenticated} onLogout={handleLogout} />
      <Switch>
        <Route exact path="/">
          {isAuthenticated ? <Redirect to="/dashboard" /> : <Login onLogin={handleLogin} />}
        </Route>
        <Route path="/dashboard">
          {isAuthenticated ? <Dashboard /> : <Redirect to="/" />}
        </Route>
      </Switch>
    </div>
  );
}

export default App;

Login.js

import React from 'react';
import { useHistory } from 'react-router-dom';

function Login({ onLogin }) {
  const history = useHistory();

  const handleLogin = () => {
    onLogin();
    history.push('/dashboard');
  };

  return (
    <div>
      <h1>Login</h1>
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}

export default Login;

Dashboard.js

import React from 'react';
import { Route, Switch, useRouteMatch } from 'react-router-dom';
import Profile from './Profile';
import Settings from './Settings';

function Dashboard() {
  const { path } = useRouteMatch();

  return (
    <div>
      <h1>Dashboard</h1>
      <Switch>
        <Route exact path={`${path}/profile`} component={Profile} />
        <Route path={`${path}/settings`} component={Settings} />
      </Switch>
    </div>
  );
}

export default Dashboard;

Navbar.js

import React from 'react';
import { Link, useHistory } from 'react-router-dom';

function Navbar({ isAuthenticated, onLogout }) {
  const history = useHistory();

  const handleLogout = () => {
    onLogout();
    history.push('/');
  };

  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        {isAuthenticated && (
          <>
            <li>
              <Link to="/dashboard/profile">Profile</Link>
            </li>
            <li>
              <Link to="/dashboard/settings">Settings</Link>
            </li>
            <li>
              <button onClick={handleLogout}>Logout</button>
            </li>
          </>
        )}
      </ul>
    </nav>
  );
}

export default Navbar;

10. 总结

React Router DOM 是 React 生态系统中不可或缺的一部分，它为开发者提供了强大的路由管理功能。通过本文的介绍，你应该已经掌握了 React Router DOM 的基本概念、核心功能以及实际应用实例。无论是简单的页面导航，还是复杂的嵌套路由和身份

推荐阅读：
  1. Elasticsearch入门实例分析
  2. Springboot入门使用实例分析

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

react-router-dom

上一篇：怎么使用Java实现多任务执行助手

下一篇：Iptables防火墙四表五链概念及使用技巧是什么

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号