App Router学习：新手入门教程

概述

本文详细介绍了App Router学习的各个方面，包括其基本概念、优势和应用场景。文章还涵盖了安装与配置App Router的方法，以及如何设置和使用基础路由。此外，还探讨了动态路由与嵌套路由的应用，并提供了实战演练的案例。

App Router学习：新手入门教程

什么是App Router

App Router的基本概念

App Router 是一种路由管理工具，主要用于单页面应用程序（SPA, Single Page Application）中。它允许开发者定义不同的路由规则，以响应用户的导航行为。App Router 内部维护了一个路由表，当用户通过浏览器地址栏输入不同的 URL 时，App Router 将根据路由表中的规则，切换并显示相应的视图组件，允许用户在单个页面上实现多视图的导航，提供更流畅的用户体验。

App Router的优势和应用场景

优势

1. 模块化：App Router 采用模块化设计，可以将不同的视图组件组织成模块，便于代码管理和维护。
2. 代码复用：通过定义路由规则和组件复用，可以减少重复代码，提高代码的可重用性。
3. 性能优化：动态加载组件，按需加载页面，减少初始加载时间，提升应用性能。
4. 用户体验：提供无缝的视图切换，提供流畅的用户体验。

应用场景

1. 网站导航：适用于具有多个页面和功能模块的网站。
2. SPA 应用：适用于单页面应用程序，如电商网站、博客、论坛等。
3. 复杂应用结构：适用于需要嵌套视图和动态路由的复杂应用结构。

安装与配置App Router

准备开发环境

在开始使用 App Router 之前，首先需要准备开发环境。通常，这包括安装 Node.js、npm 以及所需的前端框架（如 React、Vue 等）。

1. 安装 Node.js 和 npm

   你可以访问 官网 下载最新版本的 Node.js，安装完成后，npm 也会被自动安装。

2. 安装项目依赖

   在命令行中运行以下命令：

   npm install

   这将安装项目所需的依赖包。

3. 安装前端框架

   假设你使用的是 React 作为前端框架，运行以下命令：

   npm install react react-dom

安装App Router

1. 安装 App Router

   在命令行中运行以下命令来安装 App Router：

   npm install @react-navigation/native

   这里以 React Navigation 作为 App Router 的示例，它是一个流行的 React 路由管理库。

2. 安装其他必要依赖

   需要额外安装 react-native-gesture-handler 和 @react-navigation/native-stack。

   npm install react-native-gesture-handler @react-navigation/native-stack

配置基础路由

App Router 的配置通常通过定义路由表来完成。接下来介绍如何配置一个简单的基础路由。

1. 创建路由表

   首先，创建一个文件 AppRouter.js，用于定义路由表：

   import { createNativeStackNavigator } from '@react-navigation/native-stack';
   
   const Stack = createNativeStackNavigator();
   
   function AppRouter() {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    );
   }
   
   export default AppRouter;

2. 定义组件

   创建组件 HomeScreen.js 和 DetailsScreen.js：

   // HomeScreen.js
   import React from 'react';
   import { View, Text } from 'react-native';
   
   const HomeScreen = () => {
    return (
      <View>
        <Text>Home Screen</Text>
      </View>
    );
   };
   
   export default HomeScreen;

   // DetailsScreen.js
   import React from 'react';
   import { View, Text } from 'react-native';
   
   const DetailsScreen = () => {
    return (
      <View>
        <Text>Details Screen</Text>
      </View>
    );
   };
   
   export default DetailsScreen;

3. 在主应用文件中引入路由

   在应用的主文件 App.js 中引入并使用 AppRouter：

   import React from 'react';
   import AppRouter from './AppRouter';
   import { NavigationContainer } from '@react-navigation/native';
   
   function App() {
    return (
      <NavigationContainer>
        <AppRouter />
      </NavigationContainer>
    );
   }
   
   export default App;

基本路由设置

路由路径设置

App Router 支持多种路径设置方式，包括绝对路径和相对路径。以下是设置路由路径的基本示例：

1. 定义路由路径

   在 AppRouter.js 文件中定义路由路径：

   import { createNativeStackNavigator } from '@react-navigation/native-stack';
   
   const Stack = createNativeStackNavigator();
   
   function AppRouter() {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    );
   }
   
   export default AppRouter;

2. 添加路径参数

   你可以在跳转路由时传递参数，这在导航到下一个组件时非常有用。

   import { useNavigation } from '@react-navigation/native';
   
   function HomeScreen() {
    const navigation = useNavigation();
   
    return (
      <View>
        <Text>Home Screen</Text>
        <Button title="Go to Details" onPress={() => navigation.navigate('Details', { id: '1' })} />
      </View>
    );
   }

路由参数与查询参数

路由参数和查询参数可以让你在路由之间传递数据。

1. 使用路由参数

   在 DetailsScreen.js 中接收并显示参数：

   import React from 'react';
   import { View, Text } from 'react-native';
   
   const DetailsScreen = ({ route }) => {
    return (
      <View>
        <Text>Details Screen</Text>
        <Text>ID: {route.params?.id}</Text>
      </View>
    );
   };
   
   export default DetailsScreen;

2. 使用查询参数

   查询参数是在 URL 中附加的参数，通常用于搜索等功能。

   import React from 'react';
   import { View, Text, Button } from 'react-native';
   import { useNavigation } from '@react-navigation/native';
   
   const SearchScreen = () => {
    const navigation = useNavigation();
   
    return (
      <View>
        <Text>Search Screen</Text>
        <Button title="Search" onPress={() => navigation.navigate('Results', { query: 'query' })} />
      </View>
    );
   };
   
   export default SearchScreen;

路由守卫

路由守卫是一种在导航到特定路由之前进行检查的机制。例如，检查用户是否已登录。

1. 定义路由守卫

   在 AppRouter.js 中添加守卫：

   import { createNativeStackNavigator } from '@react-navigation/native-stack';
   import { useIsFocused } from '@react-navigation/native';
   import { useEffect } from 'react';
   
   const Stack = createNativeStackNavigator();
   
   function AppRouter() {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} options={{
          guard: () => {
            const isFocused = useIsFocused();
            if (!isFocused) return;
            const isLoggedIn = true; // 假设已登录
            if (!isLoggedIn) {
              console.log('User is not logged in');
              Stack.navigate('Login');
            }
          }
        }} />
      </Stack.Navigator>
    );
   }
   
   export default AppRouter;

2. 跳转到登录页面

   如果用户未登录，则跳转到登录页面：

   import { Stack } from '@react-navigation/native-stack';
   
   function ProfileScreen() {
    useEffect(() => {
      const isLoggedIn = true; // 假设已登录
      if (!isLoggedIn) {
        Stack.navigate('Login');
      }
    }, []);
   
    return (
      <View>
        <Text>Profile Screen</Text>
      </View>
    );
   }
   
   export default ProfileScreen;

动态路由与嵌套路由

动态路由的定义

动态路由允许你定义包含变量的路由。例如，定义一个可以接受不同参数的路由。

实现动态路由

假设有一个博客应用，每个博客文章都有一个唯一的 ID，我们可以通过动态路由来处理这些路由。

1. 定义动态路由

   在 AppRouter.js 中定义动态路由：

   import { createNativeStackNavigator } from '@react-navigation/native-stack';
   
   const Stack = createNativeStackNavigator();
   
   function AppRouter() {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Blog" component={BlogScreen} />
        <Stack.Screen name="Blog/:id" component={BlogDetailScreen} />
      </Stack.Navigator>
    );
   }
   
   export default AppRouter;

2. 处理动态参数

   在 BlogDetailScreen.js 中处理动态参数：

   import React from 'react';
   import { View, Text } from 'react-native';
   
   const BlogDetailScreen = ({ route }) => {
    return (
      <View>
        <Text>Blog Detail Screen</Text>
        <Text>ID: {route.params?.id}</Text>
      </View>
    );
   };
   
   export default BlogDetailScreen;

嵌套路由的定义与实现

嵌套路由允许你在一个路由内定义多个子路由。

1. 定义嵌套路由

   在 AppRouter.js 中定义嵌套路由：

   import { createNativeStackNavigator } from '@react-navigation/native-stack';
   import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
   
   const Stack = createNativeStackNavigator();
   const Tab = createBottomTabNavigator();
   
   function AppRouter() {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
        <Stack.Screen name="Settings" component={SettingsScreen} />
        <Stack.Screen name="Tabs" component={TabsScreen} />
      </Stack.Navigator>
    );
   }
   
   function TabsScreen() {
    return (
      <Tab.Navigator>
        <Tab.Screen name="Tab1" component={Tab1Screen} />
        <Tab.Screen name="Tab2" component={Tab2Screen} />
      </Tab.Navigator>
    );
   }
   
   export default AppRouter;

2. 定义子路由组件

   创建子路由组件 Tab1Screen.js 和 Tab2Screen.js：

   import React from 'react';
   import { View, Text } from 'react-native';
   
   const Tab1Screen = () => {
    return (
      <View>
        <Text>Tab 1 Screen</Text>
      </View>
    );
   };
   
   const Tab2Screen = () => {
    return (
      <View>
        <Text>Tab 2 Screen</Text>
      </View>
    );
   };
   
   export default Tab1Screen;
   export default Tab2Screen;

路由与组件的配合

路由组件的使用

路由组件是定义不同视图的关键部分。它通常包含页面的布局和交互逻辑。

1. 定义路由组件

   假设在 AppRouter.js 中定义了路由：

   import { createNativeStackNavigator } from '@react-navigation/native-stack';
   import HomeScreen from './HomeScreen';
   import DetailsScreen from './DetailsScreen';
   
   const Stack = createNativeStackNavigator();
   
   function AppRouter() {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    );
   }
   
   export default AppRouter;

2. 定义组件

   在 HomeScreen.js 和 DetailsScreen.js 中定义组件：

   // HomeScreen.js
   import React, { Component } from 'react';
   import { View, Text } from 'react-native';
   
   class HomeScreen extends Component {
    componentDidMount() {
      console.log('HomeScreen mounted');
    }
   
    componentWillUnmount() {
      console.log('HomeScreen unmounted');
    }
   
    render() {
      return (
        <View>
          <Text>Home Screen</Text>
        </View>
      );
    }
   }
   
   export default HomeScreen;

   // DetailsScreen.js
   import React from 'react';
   import { View, Text } from 'react-native';
   
   const DetailsScreen = () => {
    return (
      <View>
        <Text>Details Screen</Text>
      </View>
    );
   };
   
   export default DetailsScreen;

路由组件的生命周期

路由组件的生命周期与普通 React 组件类似，包括 componentDidMount 和 componentWillUnmount 等方法。

1. 定义生命周期方法

   在 HomeScreen.js 中定义生命周期方法：

   import React, { Component } from 'react';
   import { View, Text } from 'react-native';
   
   class HomeScreen extends Component {
    componentDidMount() {
      console.log('HomeScreen mounted');
    }
   
    componentWillUnmount() {
      console.log('HomeScreen unmounted');
    }
   
    render() {
      return (
        <View>
          <Text>Home Screen</Text>
        </View>
      );
    }
   }
   
   export default HomeScreen;

动态加载组件

动态加载组件是一种提高应用性能的方法，特别是对于大型应用。

1. 定义动态加载组件

   在 AppRouter.js 中动态加载组件：

   import { createNativeStackNavigator } from '@react-navigation/native-stack';
   import { lazy } from 'react';
   
   const Stack = createNativeStackNavigator();
   
   const HomeScreen = lazy(() => import('./HomeScreen'));
   const DetailsScreen = lazy(() => import('./DetailsScreen'));
   
   function AppRouter() {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    );
   }
   
   export default AppRouter;

2. 定义组件

   在 HomeScreen.js 和 DetailsScreen.js 中定义组件：

   // HomeScreen.js
   import React from 'react';
   import { View, Text } from 'react-native';
   
   const HomeScreen = () => {
    return (
      <View>
        <Text>Home Screen</Text>
      </View>
    );
   };
   
   export default HomeScreen;

   // DetailsScreen.js
   import React from 'react';
   import { View, Text } from 'react-native';
   
   const DetailsScreen = () => {
    return (
      <View>
        <Text>Details Screen</Text>
      </View>
    );
   };
   
   export default DetailsScreen;

实战演练

实践项目案例

本节将通过一个简单的博客应用来演示如何使用 App Router。

项目结构

1. 创建项目文件

   假设项目文件结构如下：

   - BlogApp
    - src
      - AppRouter.js
      - App.js
      - HomeScreen.js
      - BlogScreen.js
      - BlogDetailScreen.js

2. 定义路由

   在 AppRouter.js 中定义路由：

   import { createNativeStackNavigator } from '@react-navigation/native-stack';
   import HomeScreen from './HomeScreen';
   import BlogScreen from './BlogScreen';
   import BlogDetailScreen from './BlogDetailScreen';
   
   const Stack = createNativeStackNavigator();
   
   function AppRouter() {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Blog" component={BlogScreen} />
        <Stack.Screen name="Blog/:id" component={BlogDetailScreen} />
      </Stack.Navigator>
    );
   }
   
   export default AppRouter;

3. 定义组件

   在 HomeScreen.js 中定义首页组件：

   import React from 'react';
   import { View, Text, Button } from 'react-native';
   
   const HomeScreen = () => {
    return (
      <View>
        <Text>Home Screen</Text>
        <Button title="Go to Blog" onPress={() => navigation.navigate('Blog')} />
      </View>
    );
   };
   
   export default HomeScreen;

   在 BlogScreen.js 中定义博客列表组件：

   import React from 'react';
   import { View, Text, Button } from 'react-native';
   import { useNavigation } from '@react-navigation/native';
   
   const BlogScreen = () => {
    const navigation = useNavigation();
   
    return (
      <View>
        <Text>Blog Screen</Text>
        <Button title="Go to Blog Detail" onPress={() => navigation.navigate('Blog', { id: '1' })} />
      </View>
    );
   };
   
   export default BlogScreen;

   在 BlogDetailScreen.js 中定义博客详情组件：

   import React from 'react';
   import { View, Text } from 'react-native';
   
   const BlogDetailScreen = ({ route }) => {
    return (
      <View>
        <Text>Blog Detail Screen</Text>
        <Text>ID: {route.params?.id}</Text>
      </View>
    );
   };
   
   export default BlogDetailScreen;

完整代码

在 App.js 中引入并使用路由：

import React from 'react';
import AppRouter from './src/AppRouter';
import { NavigationContainer } from '@react-navigation/native';

function App() {
  return (
    <NavigationContainer>
      <AppRouter />
    </NavigationContainer>
  );
}

export default App;

常见问题与解决方法

问题1：路由跳转失败

问题描述

在使用 navigation.navigate 跳转路由时，可能会遇到跳转失败的问题。

解决方案

1. 检查路由定义：确保在 AppRouter.js 中正确定义了路由。
2. 检查导航权限：确保当前组件有权进行导航操作。
3. 调试信息：使用 console.log 打印导航信息，查看是否有错误信息。

问题2：路由守卫未生效

问题描述

在定义路由守卫时，守卫未生效，导致用户未经验证就访问了受保护的路由。

解决方案

1. 检查守卫逻辑：确保守卫逻辑正确，检查用户登录状态。
2. 调试信息：在守卫逻辑中添加 console.log 语句，查看守卫逻辑是否执行。
3. 导航跳转：确保在守卫逻辑中正确调用 Stack.navigate。

优化与调试技巧

调试技巧

1. 使用 console.log：在关键逻辑处添加 console.log 输出调试信息。
2. 使用 DevTools：利用 React DevTools 或其他开发者工具查看组件树和状态。
3. 代码审查：仔细检查代码逻辑，确保没有遗漏。

性能优化

1. 按需加载组件：使用 lazy 功能按需加载组件，减少初始加载时间。
2. 使用缓存：对于频繁访问的数据，可以考虑使用缓存机制。
3. 优化导航性能：减少不必要的跳转和重新渲染。