React 路由

于 2024-08-04 08:32:49 发布
阅读量170 收藏 4
点赞数
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lwx666sl/article/details/140885065
版权

React 路由通常使用 react-router 库来实现，它是一个功能强大的库，用于在 React 应用程序中实现客户端路由。以下是关于如何在 React 中使用 React Router 的详细说明：

安装 React Router

首先，你需要安装 react-router-dom 包，这是用于在浏览器环境中实现路由的包。

npm install react-router-dom

基本用法

以下是使用 React Router 设置基本路由的步骤和示例代码。

1. 创建基础路由组件

首先，创建一些简单的组件，它们将被路由渲染。

实例

import React from 'react';

const Home = () => {
  return <h2>Home</h2>;
};

export default Home;

// About.js
import React from 'react';

const About = () => {
  return <h2>About</h2>;
};

export default About;

// Contact.js
import React from 'react';

const Contact = () => {
  return <h2>Contact</h2>;
};

export default Contact;

2. 设置路由

在你的主应用组件中，使用 react-router-dom 的组件来设置路由。

实例

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

import Home from './Home';
import About from './About';
import Contact from './Contact';

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </Router>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

嵌套路由

React Router 允许你创建嵌套路由，这样可以在一个组件内渲染更多的路由。

实例

// Dashboard.js
import React from 'react';
import { Link, Outlet } from 'react-router-dom';

const Dashboard = () => {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <ul>
          <li>
            <Link to="profile">Profile</Link>
          </li>
          <li>
            <Link to="settings">Settings</Link>
          </li>
        </ul>
      </nav>
      <Outlet />
    </div>
  );
};

export default Dashboard;

实例

// Profile.js
import React from 'react';

const Profile = () => {
  return <h2>Profile</h2>;
};

export default Profile;

实例

// Settings.js
import React from 'react';

const Settings = () => {
  return <h2>Settings</h2>;
};

export default Settings;

在主应用组件中设置嵌套路由：

实例

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

import Home from './Home';
import About from './About';
import Contact from './Contact';
import Dashboard from './Dashboard';
import Profile from './Profile';
import Settings from './Settings';

const App = () => {
  return (
    <Router>
      <div>
        <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="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/dashboard" element={<Dashboard />}>
            <Route path="profile" element={<Profile />} />
            <Route path="settings" element={<Settings />} />
          </Route>
        </Routes>
      </div>
    </Router>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

动态路由

可以在路径中包含动态参数。

实例

// User.js
import React from 'react';
import { useParams } from 'react-router-dom';

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

export default User;

在主应用组件中设置动态路由：

实例

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

import Home from './Home';
import About from './About';
import Contact from './Contact';
import Dashboard from './Dashboard';
import Profile from './Profile';
import Settings from './Settings';
import User from './User';

const App = () => {
  return (
    <Router>
      <div>
        <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="/dashboard">Dashboard</Link>
            </li>
            <li>
              <Link to="/user/1">User 1</Link>
            </li>
            <li>
              <Link to="/user/2">User 2</Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/dashboard" element={<Dashboard />}>
            <Route path="profile" element={<Profile />} />
            <Route path="settings" element={<Settings />} />
          </Route>
          <Route path="/user/:userId" element={<User />} />
        </Routes>
      </div>
    </Router>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

404 页面

可以使用 React Router 提供的 Navigate 组件来实现 404 页面重定向。

实例

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

import Home from './Home';
import About from './About';
import Contact from './Contact';
import Dashboard from './Dashboard';
import Profile from './Profile';
import Settings from './Settings';
import User from './User';

const NotFound = () => {
  return <h2>404 Page Not Found</h2>;
};

const App = () => {
  return (
    <Router>
      <div>
        <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="/dashboard">Dashboard</Link>
            </li>
            <li>
              <Link to="/user/1">User 1</Link>
            </li>
            <li>
              <Link to="/user/2">User 2</Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/dashboard" element={<Dashboard />}>
            <Route path="profile" element={<Profile />} />
            <Route path="settings" element={<Settings />} />
          </Route>
          <Route path="/user/:userId" element={<User />} />
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </div>
    </Router>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

小结

通过使用 React Router，你可以轻松地在 React 应用中实现路由功能，包括基本路由、嵌套路由、动态路由以及 404 页面等。通过这种方式，你可以创建一个功能强大且用户友好的单页应用程序 (SPA)。

熬夜写代码的平头哥
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
react路由传参
博客
02-19 1181
最近想用react做个前端界面，看到路由这块，关于路由传参，有不少文章没有及时更新，会对后边的人产生误导。 react路由传参有三种方式，其中放在路径中问号后面的参数（search参数），许多文章说用query传，尝试后发现不会出现在路径中 后来在Stack Overflow上找到相关问题，该方法可以用于router v3，v4及更高版本不可用，17年官方github讨论中就确认这点 Stack Overflow和官方都有推荐方法：用一个叫qs的库，实现对象与search参数的字符串化和解析 ...
React路由鉴权的实现方法
10-16
在本文中，我们将深入探讨React路由鉴权的实现方法，同时也会简要提及Vue的beforeEach路由守卫作为对比。 首先，让我们理解React路由的基本概念。React Router是一个用于管理React应用程序中URL导航的库，它允许...
React路由
mantou_riji的博客
11-30 5854
多页面应用是指每切换一个页面就是一个真正的html页面。 单页面应用是指整个应用只有一个完整的页面，点击页面中的链接不会刷新页面只会局部更新，并且数据都需要通过ajax请求获取，并在前端异步展示。单页面，多组件。 路由匹配的是只是端口号后面的内容（/about、/history）。那么是如何实现一点击导航栏的选项浏览器地址栏中的路径就改变呢， 这就需要借助history实现。 浏览器的BOM身上有一个history，用于管理浏览器的路径、历史记录等。 但是BOM原生的history不好操作我们一般用一个封装
react路由
m0_62823653的博客
07-18 745
第一部分路由基本使用第一部分路由基本使用。
React路由配置
weixin_65243943的博客
07-01 2780
React路由配置
React路由守卫
E_c_ho__的博客
02-21 1185
React路由守卫
react路由配置
最新发布
qq_19820589的博客
04-23 470
组件会渲染对应的组件。组件来实现路由匹配和渲染。React 路由可以通过。
react路由守卫
dbn2001的博客
04-06 3618
1.路由守卫高阶组件的编写 import React from 'react' import { Route, Redirect } from 'react-router-dom' import { message } from 'antd' export default function AuthRoute({ component: Component, ...rest }) { return ( <Route {...rest} render={(...
react路由鉴权
北巷的博客
10-11 1019
react路由鉴权
react路由配置方式详解
08-29
React 路由配置方式详解 React 路由配置是 React 应用程序中一个非常重要的部分，它可以帮助我们实现客户端路由，并提供了许多有用的功能，例如参数传递、重定向等。本篇文章将详细介绍 React 路由配置的方式，并...
React 路由懒加载的几种实现方案
10-17
以下是React路由懒加载的几种实现方案： 1. **使用 `import()` 语法** `import()` 是一个动态导入的提案，返回一个Promise，可以异步加载模块。在React路由中，你可以通过定义一个函数，该函数返回一个Promise来...
React路由管理之React Router总结
08-27
React项目通常都有很多的URL需要管理，最常使用的解决方案就是React Router了，本篇文章主要介绍了React路由管理之React Router总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解各版本React路由的跳转的方法
11-27
在React应用中，路由管理是不可或缺的一部分，React-Router作为React生态中的主要路由库，其不同版本间的跳转方法有所差异。以下是对React-Router各版本中路由跳转方法的详解。 1. React-Router 2.0.0 版本： 在...
react-router-Demo:react路由嵌套 传参
05-17
该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。目录自动格式化代码更改页面<title>... 使用AJAX请求获取数据与API后端集成节点Ruby on Rails 在开发中...
03.React路由3.x_React_
10-02
在React世界中，路由是构建单页应用（SPA）的核心组成部分。React Router是React社区广泛使用的第三方库，它允许我们管理应用的导航和URL状态。本教程将专注于React Router v3，虽然较新版本（v4及更高）已经发布，...
关于react路由的一些理解
09-27
关于react路由的一些浅显理解
react路由+状态机demo
04-25
react路由+状态机demo,是上一个demo的进化版，添加了action 并且拆分了reducer.js
raviger:用钩子React路由
04-28
基于React钩子的路由器，会在所有URL更改上进行更新。 受到启发。 零依赖性。 微小的足迹。 安装 npm i raviger 文件 完整的文档可 快速开始 import { useRoutes , Link , useQueryParams } from 'raviger' const ...
react路由哈希路由
03-31
React路由有两种主要的路由方式：哈希路由和浏览器路由。 哈希路由是指在URL中使用#符号，例如：`http://example.com/#/home`。这种方式的好处是可以避免页面刷新，因为每次URL的改变只会触发hashchange事件，而不会重新发送请求。哈希路由也比较容易实现，不需要服务器端的支持，只需要在前端通过监听hashchange事件来改变页面的内容。 浏览器路由是指在URL中直接使用路径，例如：`http://example.com/home`。这种方式需要服务器端的支持，因为每次URL的改变都会触发浏览器向服务器发送请求。浏览器路由也更加符合传统的URL格式，看起来更加美观。 React路由提供了两种不同的路由方式：BrowserRouter和HashRouter。BrowserRouter使用浏览器路由，而HashRouter使用哈希路由。根据项目的实际情况选择合适的路由方式即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

熬夜写代码的平头哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值