掌握 React 路由：应用程序导航完整指南-js教程-PHP中文网

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

碧海醫心

发布： 2024-10-07 11:45:22

转载

527人浏览过

掌握 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 = () => <h2>home</h2>;
const about = () => <h2>about</h2>;

const app = () => {
  return (
    <router>
      <nav>
        <link to="/">home</link>
        <link to="/about">about</link>
      </nav>

      <routes>
        <route path="/" element={<home />} />
        <route path="/about" element={<about />} />
      </routes>
    </router>
  );
};

export default app;

登录后复制

3. 嵌套路由

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

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

const dashboard = () => <h2>dashboard home</h2>;
const profile = () => <h2>your profile</h2>;

const dashboardlayout = () => {
  return (
    <div>
      <nav>
        <link to="/dashboard">home</link>
        <link to="/dashboard/profile">profile</link>
      </nav>
      <routes>
        <route path="/" element={<dashboard />} />
        <route path="profile" element={<profile />} />
      </routes>
    </div>
  );
};

const app = () => {
  return (
    <router>
      <routes>
        <route path="/dashboard/*" element={<dashboardlayout />} />
      </routes>
    </router>
  );
};

export default app;

登录后复制

4. 动态路由

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

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

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

const app = () => {
  return (
    <router>
      <nav>
        <link to="/user/1">user 1</link>
        <link to="/user/2">user 2</link>
      </nav>

      <routes>
        <route path="/user/:id" element={<user />} />
      </routes>
    </router>
  );
};

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 ? <outlet /> : <navigate to="/login" />;
};

const app = () => {
  return (
    <router>
      <routes>
        <route path="/login" element={<login />} />
        <route path="/dashboard" element={<privateroute />}>
          <route path="" element={<dashboard />} />
        </route>
      </routes>
    </router>
  );
};

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 (
    <div>
      <h2>login</h2>
      <button onclick={handlelogin}>login</button>
    </div>
  );
};

export default login;

登录后复制

7. 404 页

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

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

const app = () => {
  return (
    <router>
      <routes>
        <route path="/" element={<home />} />
        <route path="/about" element={<about />} />
        <route path="*" element={<notfound />} />
      </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(() => import('./Home'));
const About = lazy(() => import('./About'));

const App = () => {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </Router>
  );
};

export default App;

登录后复制

以上就是掌握 React 路由：应用程序导航完整指南的详细内容，更多请关注php中文网其它相关文章！