掌握 React 路由：应用程序导航完整指南

百变鹏仔 3天前 #JavaScript

文章标签路由

1. react router 简介

react router 是一个用于在 react 应用程序中处理路由的库。它允许您的应用程序在不同的组件和视图之间导航，而无需重新加载整页，从而实现无缝的用户体验。

2. 基本设置

首先安装react-router-dom：

npm install react-router-dom

使用 browserrouter、routes 和 route 设置基本路由：

import react from 'react';import { browserrouter as router, routes, route, link } from 'react-router-dom';const home = () =&gt; <h2>home</h2>;const about = () =&gt; <h2>about</h2>;const app = () =&gt; {  return (    <router><nav><link to="/">home        <link to="/about">about      </nav><routes><route path="/" element="{&lt;home"></route>} /&gt;        <route path="/about" element="{&lt;about"></route>} /&gt;      </routes></router>  );};export default app;

3. 嵌套路由

对于更复杂的应用程序，您可以嵌套路由。以下是如何在父组件中设置嵌套路由：

import react from 'react';import { browserrouter as router, routes, route, link } from 'react-router-dom';const dashboard = () =&gt; <h2>dashboard home</h2>;const profile = () =&gt; <h2>your profile</h2>;const dashboardlayout = () =&gt; {  return (    <div>      <nav><link to="/dashboard">home        <link to="/dashboard/profile">profile      </nav><routes><route path="/" element="{&lt;dashboard"></route>} /&gt;        <route path="profile" element="{&lt;profile"></route>} /&gt;      </routes></div>  );};const app = () =&gt; {  return (    <router><routes><route path="/dashboard/*" element="{&lt;dashboardlayout"></route>} /&gt;      </routes></router>  );};export default app;

4. 动态路由

动态路由允许您在 url 中传递参数。以下是定义和访问动态路线的方法：

import { useparams } from 'react-router-dom';const user = () =&gt; {  const { id } = useparams();  return <h2>user id: {id}</h2>;};const app = () =&gt; {  return (    <router><nav><link to="/user/1">user 1        <link to="/user/2">user 2      </nav><routes><route path="/user/:id" element="{&lt;user"></route>} /&gt;      </routes></router>  );};export default app;

5. 受保护路线

要实现受保护的路由，您可以创建自定义 privateroute 组件：

import { navigate, outlet } from 'react-router-dom';const useauth = () =&gt; {  const user = { loggedin: true }; // replace with actual auth logic  return user &amp;&amp; user.loggedin;};const privateroute = () =&gt; {  const isauth = useauth();  return isauth ? <outlet></outlet> : <navigate to="/login"></navigate>;};const app = () =&gt; {  return (    <router><routes><route path="/login" element="{&lt;login"></route>} /&gt;        <route path="/dashboard" element="{&lt;privateroute"></route>}&gt;          <route path="" element="{&lt;dashboard"></route>} /&gt;              </routes></router>  );};export default app;

6. 程序化导航

有时，您可能希望以编程方式导航，例如在提交表单后。在 react router v6 中使用 usenavigate 钩子：

import { usenavigate } from 'react-router-dom';const login = () =&gt; {  const navigate = usenavigate();  const handlelogin = () =&gt; {    // login logic here...    navigate('/dashboard');  };  return (    <div>      <h2>login</h2>      <button onclick="{handlelogin}">login</button>    </div>  );};export default login;

7. 404 页

通过创建包罗万象的路由来处理 404（未找到）错误：

const notfound = () =&gt; <h2>404 - page not found</h2>;const app = () =&gt; {  return (    <router><routes><route path="/" element="{&lt;home"></route>} /&gt;        <route path="/about" element="{&lt;about"></route>} /&gt;        <route path="*" element="{&lt;notfound"></route>} /&gt;      </routes></router>  );};export default app;

8. 性能考虑因素

对于大型应用程序，延迟加载路由可以提高性能。以下是如何使用 react.lazy() 和 suspense 实现延迟加载：

import React, { Suspense, lazy } from 'react';import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';const Home = lazy(() =&gt; import('./Home'));const About = lazy(() =&gt; import('./About'));const App = () =&gt; {  return (    <router><suspense fallback="{&lt;div">Loading...}&gt;        <routes><route path="/" element="{&lt;Home"></route>} /&gt;          <route path="/about" element="{&lt;About"></route>} /&gt;        </routes></suspense></router>  );};export default App;

文章推荐

掌握 React 路由：应用程序导航完整指南

1. react router 简介

2. 基本设置

3. 嵌套路由

4. 动态路由

5. 受保护路线

6. 程序化导航

7. 404 页

8. 性能考虑因素

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？