基于react-native-web项目，如何用React Router 4实现跨平台URL路由？

这个问题我之前在用re-start模板开发跨平台项目时也碰到过，核心原因很明确：Web端的<Link>组件依赖浏览器的History API，但Android原生环境没有这套路由机制。好在re-start模板已经内置了适配跨平台的路由方案，只要调整下组件使用方式就能解决。

下面是具体的解决步骤：

1. 替换Web版<Link>为跨平台导航组件 #

别再直接用React Router的<Link>了，改用模板适配的原生友好导航方式：

• 如果你用的是函数组件，用useNavigation钩子实现跳转：

import { useNavigation } from '@react-navigation/native';
import { TouchableOpacity, Text } from 'react-native';

const TopLevelComponent = () => {
  const navigation = useNavigation();
  
  return (
    <TouchableOpacity onPress={() => navigation.navigate('About')}>
      <Text>Link to About</Text>
    </TouchableOpacity>
  );
};

• 如果是类组件，直接通过props获取导航对象：

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

class TopLevelComponent extends React.Component {
  render() {
    return (
      <TouchableOpacity onPress={() => this.props.navigation.navigate('About')}>
        <Text>Link to About</Text>
      </TouchableOpacity>
    );
  }
}

2. 确认目标页面已注册到路由栈 #

打开你的路由配置文件（比如App.js或者模板自带的NavigationConfig.js），确保About页面已经被添加到导航栈中：

import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import TopLevelComponent from './TopLevelComponent';
import AboutComponent from './AboutComponent';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={TopLevelComponent} />
        <Stack.Screen name="About" component={AboutComponent} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

3. 调试排查小技巧 #

如果调整后还是有问题，可以试试这些方法：

• 用adb logcat查看Android模拟器的日志，找路由相关的报错信息
• 重新安装依赖：运行npm install或yarn install，确保模板的导航依赖完整
• 重启Metro服务和Android模拟器，缓存问题偶尔会导致这类异常

内容的提问来源于stack exchange，提问作者user126715