我正在尝试确定在React Native Web项目中设置路由的最佳方法。我正在使用expo,并按照本指南使用Next JS https://docs.expo.io/versions/latest/guides/using-nextjs/,所以我有这样的App.js:
import index from "./pages/index";
import alternate from "./pages/alternate";
import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
const AppNavigator = createStackNavigator(
{
index,
alternate
},
{
initialRouteName: "index"
}
);
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;
我关心的是如何最好地处理路由。我目前有这样的index.js页面设置。
import * as React from 'react'
import { StyleSheet, Button, Text, View } from 'react-native'
export default function App ({navigation}) {
return (
<View style={styles.container}>
{/* Native route */}
<Button
title="Go to Details"
onPress={() => navigation.navigate("alternate")}
/>
{/* Web route */}
<Text style={styles.link} accessibilityRole="link" href={`/alternate`}>
A universal link
</Text>
</View>
);
}
如您所见,当前需要使用单独的代码来呈现本机与Web路由。我想知道什么是处理这种渲染的最佳方法。我研究了将React Navigation用于Web,并且不会反对,但是似乎我应该坚持使用Next Router。
在此先感谢您对处理条件渲染的任何建议。
为此使用reactnavigation Web支持
https://reactnavigation.org/docs/en/web-support.html