CODEWITHSUNDEEP
reactjsreact-nativereact-routerreact-router-v4
user126715
user126715

Reputation: 3856

How do I do cross-platform (web and native) URL routing with React Router 4?

I'm starting a project that I'm hoping to make mostly cross-platform with react-native-web.

I'm using this react-native starter template here: https://github.com/react-everywhere/re-start

And the only thing I'm struggling to get working is URL routing.

in my index.js, I have my App component like so:

class App extends React.Component {
render() {
    return (
        <Provider store={store}>
            <Router>
                <Switch>
                    <Route path='/about' component={AboutScreenComponent}/>
                    <Route exact path='/' component={TopLevelComponent}/>
                </Switch>
            </Router>
        </Provider>
    );
}

Then I just wanted to test a link, so I added a <Link to="/about"><Text>Link to About</Text</Link> inside of TopLevelComponent.

On web, it works just as expected. In the Android emulator, clicking the link doesn't do anything.

The docs on this functionality are light. I know I need to do something with DeepLinking but I'm just not sure exactly what I need to do. My understanding is I need to modify the android manifest file to allow URL routing, but I didn't have much luck with that either.

How can I enable URL routing with react-router-native on android if my dev server is localhost:3000?

Upvotes: 1

Views: 1726

Answers (2)

learning2017
learning2017

Reputation: 41

My guess would be: 

import React from 'react'
import { Platform } from 'react-native'

let Router
if (Platform.OS === 'web') {
  Router = require('react-router-dom').BrowserRouter
} else {
  Router = require('react-router-native').NativeRouter
}

Upvotes: 2

Jed Richards
Jed Richards

Reputation: 12437

My feeling is that the shared cross platform components should mainly just be your pure view components. The outer layers of the app, like routing, should use a library most appropriate for the platform, i.e. react-router for web, and react-navigation or similar for native. Perhaps in the future we can have a truly unified code base, but for now it doesn't feel like the technology is ready ...

Upvotes: 1

Related Questions