HoRain云--React 路由
🎬 HoRain云小助手：个人主页
🔥 个人专栏: 《Linux 系列教程》《c语言教程》
⛺️生活的理想，就是为了理想的生活!
⛳️ 推荐
前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。
专栏介绍
专栏名称 | 专栏介绍 |
《C语言》 | 本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。 |
《网络协议》 | 本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！ |
《docker容器精解篇》 | 全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。 |
《linux系列》 | 本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。 |
《python 系列》 | 本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。 |
《试题库》 | 本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等） |
目录
⛳️ 推荐
专栏介绍
安装 React Router
基本用法
1. 创建基础路由组件
实例
2. 设置路由
实例
嵌套路由
实例
实例
实例
实例
动态路由
实例
实例
404 页面
实例
小结
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)。
❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍
🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙