Javascript React：使用React导航和React路由器时如何更改页面？

我正在使用Expo SDK 36构建一个

react native

应用程序

这允许我为iOS和Android等本机环境创建一个应用程序，但使用

react native web

，也可以使其在web上工作

由于不支持浏览器历史记录（导航时更改窗口位置），我被建议只在本机应用程序中使用官方的expo routing library（react navigation），并用于web

因为我的项目中有两个库，所以我可以使用

myRouter.web.js

导出使用

react-router

制作的路由器，以及使用react-navigation导出导航的

myRouter.js

这是如何使用

react导航

在以下页面之间创建链接：

<Button
  title="Go to Details"
  onPress={() => this.props.navigation.navigate('Details')}
/>

import { Link } from 'react-router-web';

export default () => <Link to={'/details'}>Go to Details</Link>;

有了这两种语法，我如何使用这两种语法在我的应用程序中创建链接，而不必在源代码中到处使用这两种语法

我正在考虑创建一个

Link.js

和

Link.web.js

，但不确定应该如何实现它

例如，

Link.js

：

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { routes } from '../config';

const routeConfigMap = {};

routes.forEach(({ page, component }) => {
  routeConfigMap[page] = {
    screen: component,
  };
});

const stackConfig = {
  initialRouteName: routes.find(({ path }) => path === '/').page,
};

const AppNavigator = createStackNavigator(routeConfigMap, stackConfig);

export default createAppContainer(AppNavigator);

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom';

import { routes } from '../config';

function createSwitchNavigator(routes) {
  return (
    <Switch>
      {routes.map((route) => (
        <Route
          key={route.page}
          path={route.path}
          exact={route.exact}
          component={component}
        />
      ))}
    </Switch>
  );
}

function createAppContainer(AppNavigator) {
  return (
    <Router>
      <AppNavigator />
    </Router>
  );
}

const AppNavigator = createSwitchNavigator(routes);

export default createAppContainer(AppNavigator);

import HomeView from '../views/HomeView';
import ListView from '../views/ListView';

export const routes = [
  {
    page: 'home',
    message: 'Home',
    path: '/',
    component: HomeView,
    exact: true,
  },
  {
    page: 'list',
    message: 'List',
    path: '/list',
    component: ListView,
    exact: true,
  },
];

import*as React from'React'；
从“react native”导入{Button}；
从'react navigation hooks'导入{useNavigation}；
导出默认函数链接（{to，screenName，children，…rest}）{
const navigation=useNavigation（）；
返回(
导航。导航（屏幕名称）}
{…休息}
/>
);
}

和

Link.web.js

：

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { routes } from '../config';

const routeConfigMap = {};

routes.forEach(({ page, component }) => {
  routeConfigMap[page] = {
    screen: component,
  };
});

const stackConfig = {
  initialRouteName: routes.find(({ path }) => path === '/').page,
};

const AppNavigator = createStackNavigator(routeConfigMap, stackConfig);

export default createAppContainer(AppNavigator);

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom';

import { routes } from '../config';

function createSwitchNavigator(routes) {
  return (
    <Switch>
      {routes.map((route) => (
        <Route
          key={route.page}
          path={route.path}
          exact={route.exact}
          component={component}
        />
      ))}
    </Switch>
  );
}

function createAppContainer(AppNavigator) {
  return (
    <Router>
      <AppNavigator />
    </Router>
  );
}

const AppNavigator = createSwitchNavigator(routes);

export default createAppContainer(AppNavigator);

import HomeView from '../views/HomeView';
import ListView from '../views/ListView';

export const routes = [
  {
    page: 'home',
    message: 'Home',
    path: '/',
    component: HomeView,
    exact: true,
  },
  {
    page: 'list',
    message: 'List',
    path: '/list',
    component: ListView,
    exact: true,
  },
];

从“React”导入React；
从'react router dom'导入{Link as RRLink}；
导出默认函数链接（{to，screenName，children，…rest}）{
返回(
{儿童}
);
}

这将迫使我在创建

时使用

屏幕视图

和

到

。这是因为react导航没有路径，它只使用一个名称

---

我遗漏了什么吗

react router还使用

this.props.history.push

导航到不同的屏幕。您可能只需要创建一个函数，该函数包含

历史记录

或

导航

，以及一个类似以下内容的变量：

function move(hn, path) {
  !!hn.navigate ? hn.navigate(path) : hn.push(path);
}

---

您可以将其与：

move（this.props.history，'/somewhere'）

和

move（this.props.navigation，'/somewhere'）

使用以下两个链接，可以完成以下操作：

AppNavigator.js

：

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { routes } from '../config';

const routeConfigMap = {};

routes.forEach(({ page, component }) => {
  routeConfigMap[page] = {
    screen: component,
  };
});

const stackConfig = {
  initialRouteName: routes.find(({ path }) => path === '/').page,
};

const AppNavigator = createStackNavigator(routeConfigMap, stackConfig);

export default createAppContainer(AppNavigator);

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom';

import { routes } from '../config';

function createSwitchNavigator(routes) {
  return (
    <Switch>
      {routes.map((route) => (
        <Route
          key={route.page}
          path={route.path}
          exact={route.exact}
          component={component}
        />
      ))}
    </Switch>
  );
}

function createAppContainer(AppNavigator) {
  return (
    <Router>
      <AppNavigator />
    </Router>
  );
}

const AppNavigator = createSwitchNavigator(routes);

export default createAppContainer(AppNavigator);

import HomeView from '../views/HomeView';
import ListView from '../views/ListView';

export const routes = [
  {
    page: 'home',
    message: 'Home',
    path: '/',
    component: HomeView,
    exact: true,
  },
  {
    page: 'list',
    message: 'List',
    path: '/list',
    component: ListView,
    exact: true,
  },
];

AppNavigator.web.js

：

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { routes } from '../config';

const routeConfigMap = {};

routes.forEach(({ page, component }) => {
  routeConfigMap[page] = {
    screen: component,
  };
});

const stackConfig = {
  initialRouteName: routes.find(({ path }) => path === '/').page,
};

const AppNavigator = createStackNavigator(routeConfigMap, stackConfig);

export default createAppContainer(AppNavigator);

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom';

import { routes } from '../config';

function createSwitchNavigator(routes) {
  return (
    <Switch>
      {routes.map((route) => (
        <Route
          key={route.page}
          path={route.path}
          exact={route.exact}
          component={component}
        />
      ))}
    </Switch>
  );
}

function createAppContainer(AppNavigator) {
  return (
    <Router>
      <AppNavigator />
    </Router>
  );
}

const AppNavigator = createSwitchNavigator(routes);

export default createAppContainer(AppNavigator);

import HomeView from '../views/HomeView';
import ListView from '../views/ListView';

export const routes = [
  {
    page: 'home',
    message: 'Home',
    path: '/',
    component: HomeView,
    exact: true,
  },
  {
    page: 'list',
    message: 'List',
    path: '/list',
    component: ListView,
    exact: true,
  },
];

---

事实并非如此。我们避免使用这种跨平台逻辑创建源代码。相反，我们更喜欢，

.web.js

，

.native.js

等等。。。我用一个例子更新了我的问题