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

gt lt amp route 657 来源： 2024-10-19

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;

上一篇：关系或能力，这两个标准都被使用

下一篇：Neomjs：高性能开源 JavaScript 框架