React Native 和 React JS 应用程序中的路由

Question

我想使用 React 和 ReactNative 以及 React-Router 开发一个应用程序。请帮助我在本机应用程序中组织路由，因为我是这方面的新手。

如果可以在 Web 和本机中使用相同的文件进行路由，那就太棒了。

这是为 Web 部件编写的代码片段：

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {Router} from 'react-router-dom';
import history from './utils/History';

import store from './store/configureStore';
import Root from './containers/Root';

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Root/>
    </Router>
  </Provider>,
  document.getElementById('root')
);

如您所见，我为我的应用程序使用了自定义历史记录，'utils/History.js' 文件看起来是这样的：

import createBrowserHistory from 'history/createBrowserHistory';

export default createBrowserHistory();

All 在网络浏览器中运行良好，但在 iOS 模拟器中却不行：

Answer 1

根据 docs，您需要从 react-router 包导入 Router 而不是 react-router-dom。

import {Provider} from 'react-redux';
import {Router} from 'react-router';
import history from './utils/History';

import store from './store/configureStore';
import Root from './containers/Root';

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Root/>
    </Router>
  </Provider>,
  document.getElementById('root')
);

React Native 和 React JS 应用程序中的路由

Routing in ReactNative and ReactJS app

reactjs

react-native

react-router-v4