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

哈喽！今天心血来潮给大家带来了《掌握 React 路由：应用程序导航完整指南》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

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 = () => 
home
;
const about = () => 
about
;

const app = () => {
  return (
    
      

      
        } />
        } />
      
    
  );
};

export default app;

3. 嵌套路由

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

import react from 'react';
import { browserrouter as router, routes, route, link } from 'react-router-dom';

const dashboard = () => 
dashboard home
;
const profile = () => 
your profile
;

const dashboardlayout = () => {
  return (
    

      
      
        } />
        } />
      
    
  );
};

const app = () => {
  return (
    
      
        } />
      
    
  );
};

export default app;

4. 动态路由

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

import { useparams } from 'react-router-dom';

const user = () => {
  const { id } = useparams();
  return 
user id: {id}
;
};

const app = () => {
  return (
    
      

      
        } />
      
    
  );
};

export default app;

5. 受保护路线

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

import { navigate, outlet } from 'react-router-dom';

const useauth = () => {
  const user = { loggedin: true }; // replace with actual auth logic
  return user && user.loggedin;
};

const privateroute = () => {
  const isauth = useauth();
  return isauth ?  : ;
};

const app = () => {
  return (
    
      
        } />
        }>
          } />
        
      
    
  );
};

export default app;

6. 程序化导航

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

import { usenavigate } from 'react-router-dom';

const login = () => {
  const navigate = usenavigate();

  const handlelogin = () => {
    // login logic here...
    navigate('/dashboard');
  };

  return (
    

      
login
      login
    
  );
};

export default login;

7. 404 页

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

const notfound = () => 
404 - page not found
;

const app = () => {
  return (
    
      
        } />
        } />
        } />
      
    
  );
};

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(() => import('./Home'));
const About = lazy(() => import('./About'));

const App = () => {
  return (
    
      Loading...