CODEWITHSUNDEEP
reactjsreact-nativereact-router-v4
max
max

Reputation: 642

Routing in ReactNative and ReactJS app

I want to develop an application using React and ReactNative, and also React-Router. Please help me to organize a routing in native apps, since I'm a newbie in that.

If it's possible to use the same file for routing both in web and native, it would be fantastic.

This is a code snippet written for web part:

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')
);

As you can see, I use a custom history for my app, this is how 'utils/History.js' file looks:

import createBrowserHistory from 'history/createBrowserHistory';

export default createBrowserHistory();

All does work pretty well in web browser, but it does not in iOS emulator: enter image description here

Upvotes: 0

Views: 97

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 282120

As per the docs, you need to import Router from react-router package and not 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')
);

Upvotes: 1

Related Questions