Accessing URL with params from a react-native-web app

Question

I am working on a React-Native app which I have ported it to Web using React-Native-Web (hosted on say http://myapp.com).

What I would like to do now, is to make custom URLs, like http://myapp.com/some/path/here/with/?params=something which I can access it in my app to dispatch appropriate navigation action after parsing it.

My question is, how do I access /some/path/here/maybe/with/?params=something?

With webpack dev server, whenever I try to access say localhost:8080/asdf, it gives an error Cannot GET /asdf

I am using react-navigation 3.3.2 (with web compatibility patch for gesture handler). I have visited this SO question but it talks about a tightly coupled mapping from link to screen.

What I want is something rather simple, I only need the path somewhere in my react app, so that I can act on it in some way.

score 2 · Answer 1 · edited Jun 23 '20 at 06:53

An exemple from my use case : In navigation

    export default createApp(
    createSwitchNavigator({
        HomeScreen : {screen: HomeScreen, path: ''},
        Contact : {screen: Contact, path: 'Contact'},
        EmailVerification : {screen : EmailVerification, path: 'confirm_email/:uid'},//<- this is how to access the page on yousite.com/confirmMail/parameterValueWithoutAnyQuestionMark
    },{
        initialRouteName:'HomeScreen',
    })
);

In your page file :

class EmailVerification extends Component{
    constructor(props)
    {
        super(props);
        this.state = { 
            isProcessDone : false, 
            uid : this.props.navigation.getParam('uid') //<- this uid paramName must be the same as in navigation
        };
    }
}

This is how I do it in my app, it might change based on your navigation I guess.

Accessing URL with params from a react-native-web app

1 Answers1