React路由器V6：初学者指南

>本教程提供了一个综合指南，用于React Router V6，这是用于React应用程序的领先路由库。 了解如何在您的React项目中有效管理URL和导航。>

密钥学习点：

• 掌握React路由器v6：本指南涵盖了在您的React应用程序中设置和使用React Router V6进行无缝导航和URL管理的基础。 路由导航和渲染：
发现如何使用
• ，和等核心组件创建动态和嵌套路由，包括将路径参数用于灵活路由。 <route></route>><link>高级路由技术：
探索高级概念，例如受保护的路线，带有
• 的程序化导航以及React Rouyter v6.4中的最新增强功能，使您能够为现代React应用程序构建复杂的路由解决方案。 useNavigate
介绍：

React在具有多个视图（页面）的构建动态Web应用程序方面表现出色。 与传统的多页应用程序不同，导航不应重新加载整个页面。 相反，视图应在现有页面中顺利进行。 React路由器声明地实现了这一目标，从而确保了无缝的用户体验。 用户期望： 每个视图的

唯一的URL：

允许书签（例如，

）。
• >功能性返回/前向按钮：www.example.com/products标准浏览器导航应按预期工作。
>
• >嵌套视图的URL：支持动态，嵌套结构（例如，
）。
• 通过指定所需的路由结构： React路由器的声明方法简化了路由： example.com/products/shoes/101
组件可以放置在应用程序结构中的任何地方。 组件的简单性，例如

>，

和其他React路由器API，使路由易于实现。

>

<Route path="/about" element={<About />} />

>

重要说明：<Route>> React Router是由Remix软件维护的第三方库，而不是官方的Facebook/Meta产品。 <Route><Link>概述：

此教程封面：

>使用NPM设置React Router。

> 基本路由概念。

嵌套路由。

带有路径参数的动态嵌套路由。

实施受保护的路由。
2. 完整的项目代码可在GitHub上获得（链接要在此处插入）。
3. 设置React Router：
4. >

   >您需要安装node.js。 如果没有，请从官方Node.js网站下载。 考虑使用版本管理器进行更轻松的node.js管理。 NPM（Node Package Manager）与node.js捆绑在一起。 验证安装：

   <Route path="/about" element={<About />} />

   >使用Create React App：创建一个新的React项目：

   node -v
   npm -v

   安装React Router dom：

   npx create-react-app react-router-demo
   cd react-router-demo

   启动开发服务器：

   npm install react-router-dom

   您的React应用程序与React路由器现在正在运行

   >。 http://localhost:3000/

   React Router基础知识：>

   我们将创建一个具有三个视图的应用程序：家庭，类别和产品。> 路由器组件

   >用路由器包装主应用程序组件：>>>。
   （使用HTML5历史记录API）通常是清洁URL的首选：
   历史对象

   BrowserRouter每个路由器都会创建一个管理导航堆栈的历史记录对象。 更改位置触发重新渲染。 HashRouter（挂钩）为程序化导航提供了BrowserRouter函数。

   >链接和路由组件

   npm start

   如果位置与路径匹配，则

   >

   呈现UI。

   提供导航，而没有页面重新加载。useNavigate navigate> update

   ：

   这设置了基本的导航和路由。<Route> <Link>

   嵌套路由：

   App.js嵌套路由将

   组件放在其他

   // src/index.js
   import { BrowserRouter } from 'react-router-dom';
   // ...
   root.render(
     <React.StrictMode>
       <BrowserRouter>
         <App />
       </BrowserRouter>
     </React.StrictMode>
   );

   >组件中。 这反映了嵌套的URL结构。
   修改

   ：

   创建

   ：<Route> <Route>

   App.js组件在父路线中呈现子路由。>

   import { Link, Route, Routes } from 'react-router-dom';
   // ... component definitions for Home, Categories, Products ...
   export default function App() {
     return (
       <div>
         <nav>
           <ul>
             <li><Link to="/">Home</Link></li>
             <li><Link to="/categories">Categories</Link></li>
             <li><Link to="/products">Products</Link></li>
           </ul>
         </nav>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/categories" element={<Categories />} />
           <Route path="/products" element={<Products />} />
         </Routes>
       </div>
     );
   }

   >动态嵌套路由：>

   >使用路径参数创建动态路由。 将尾随的Categories.js添加到父路线，以允许子路由。 使用

   访问参数。

   import { Link, Route, Routes } from 'react-router-dom';
   import { Categories, Desktops, Laptops } from './Categories'; // Import nested route components
   
   // ... other components ...
   
   export default function App() {
     return (
       <div>
         {/* ... navigation ... */}
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/categories" element={<Categories />}>
             <Route path="desktops" element={<Desktops />} />
             <Route path="laptops" element={<Laptops />} />
           </Route>
           <Route path="/products/*" element={<Products />} /> {/* Note the trailing * */}
         </Routes>
       </div>
     );
   }

   >

   > update<Outlet>：

   参数使用

   >。

   *保护路线： useParams

   >使用

   进行程序化重定向并创建一个自定义Products.js组件。

   >

   import { Link, Outlet } from 'react-router-dom';
   
   export const Categories = () => (
     <div>
       <h2>Categories</h2>
       <nav>
         <ul>
           <li><Link to="desktops">Desktops</Link></li>
           <li><Link to="laptops">Laptops</Link></li>
         </ul>
       </nav>
       <Outlet />
     </div>
   );
   
   export const Desktops = () => <h3>Desktop PC Page</h3>;
   export const Laptops = () => <h3>Laptops Page</h3>;

   创建

   ：:productId Product useParams>添加一个

   组件，然后集成

   到中以保护>路由。 请记住原始响应中提到的安全考虑。

   >

   useNavigate React Router V6.4及以后：PrivateRoute>

   > React Router V6.4引入了数据加载和突变API（受到混音的启发）。 这些API使用加载程序和操作简化了路线内的数据获取和管理。 本节将需要一个单独的，更详细的说明。

   > PrivateRoute.js

   摘要：

   // ... (import statements and productData) ...
   
   const Products = () => (
     <div>
       <h2>Products</h2>
       <ul> {/* ... linkList (generated from productData) ... */} </ul>
       <Routes>
         <Route path=":productId" element={<Product data={productData} />} />
         <Route index element={<p>Please select a product.</p>} />
       </Routes>
     </div>
   );
   
   // ... Product component ...

   >本教程提供了React Router V6的全面概述，涵盖了基本和高级路由概念。 请记住要查阅官方的React Router文档以获取最新信息和详细信息。

   >

   以上是React路由器V6：初学者指南的详细内容。更多信息请关注PHP中文网其他相关文章！