Redirect

[RishitKedia]

Hey, Leo! 👋

This is awesome! Thank you for making this. 🙏

Well, I'm having issues using react-router's <Redirect /> with this library. 😭

I see a blank screen, and it renders/redirects twice resulting in the following warning: Warning: You tried to redirect to the same route you're currently on: "/redirect".

Code: 👨‍💻

<NativeRouter>
    <Navigation>
        <Card
            exact
            path="/"
            render={() => {
                console.log('Redirecting.');
                return (
                    <Redirect to="/redirect" />
                );
            }}
        />
        
        <Card
            path="/redirect"
            render={() => (
                <Text>Redirected.</Text>
            )}
        />
    </Navigation>
</NativeRouter>

I've also prepared a Snack for you: https://snack.expo.io/SkgJqwz6W.

Thanks for your time. Cheers! 😃

[LaszloDev]

Your app starts with thepath="/" and both Card paths match to this, meaning both Cards are rendered. Because of this you can't redirect to a Card you have already rendered.

Solution is to wrap both Cards in a <Switch>, so only the first path matched is rendered. I changed in your Snack example <Navigation> by <Switch> and its working, see here: https://snack.expo.io/SJkcmR2AZ

As you can see in Leo's example he wrapped the starting and main route in a Switch: https://github.com/LeoLeBras/react-router-navigation/blob/master/examples/Basic/src/index.js#L129

[RishitKedia]

Hey, @LaszloDev. 👋

Yup, replacing <Navigation> with <Switch> will work, but then we'll lose out on the transitions/animations provided by <Navigation> (the reason I want to use this library). It should work with <Navigation>. 😛

I've also tried using this:

<NativeRouter>
    <Navigation>
        <Switch>
            <Card
                exact
                path="/"
                render={() => {
                    console.log('Redirecting.');
                    return (
                        <Redirect to="/redirect" />
                    );
                }}
            />
            
            <Card
                path="/redirect"
                render={() => (
                    <Text>Redirected.</Text>
                )}
            />
        </Switch>
    </Navigation>
</NativeRouter>

But this gives me the following error: Unhandled Promise rejection: Invariant Violation: there should always be only one scene active, not 0

Thanks for your help! 🙏

[LaszloDev]

Why do you need for the initial route setup an animation? The reason to use this kind of initial redirect is that you have a default sub route when using BottomNavigation or Tabs to decide with tab is active.

[RishitKedia]

Hey, @LaszloDev! 👋

Sorry for the late reply. I somehow missed your comment. 😰

That example was made for brevity. The reason I'm using this initial redirect is that, say, I want to redirect the user to the Home screen if the user is already signed in, and render the Sign up/Sign in screen if the user is not signed in. Also, I have other Cards next to the ones in the example, for which I need the transition. I'm not sure if this is the right way to handle this, but I still think there's an issue with how react-router-navigation behaves when used with react-router's Redirect. 🙂

Cheers! 😃

[art1c0]

I also have troubles using Redirect - it does not work and gives this error, maybe it will help:

TypeError: undefined is not an object (evaluating 'scenes[targetSceneIndexInScenes].index')

This error is located at:
    in CardStack (at DefaultRenderer.js:137)
    in RCTView (at View.js:78)
    in View (at Transitioner.js:192)
    in Transitioner (at DefaultRenderer.js:151)
    in DefaultRenderer (at Navigation.js:42)
    in CardStack (created by Route)
    in Route (created by withRouter(CardStack))
    in withRouter(CardStack) (at Navigation.js:39)
    in Navigation (at App.js:57)
    in Router (created by MemoryRouter)
    in MemoryRouter (at NativeRouter.js:11)
    in NativeRouter (at App.js:56)
    in RCTView (at View.js:78)
    in View (at App.js:44)
    in App (created by Connect(App))
    in Connect(App) (at App.js:10)
    in Provider (at App.js:9)
    in NativeApp (at registerRootComponent.js:35)
    in RootErrorBoundary (at registerRootComponent.js:34)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:78)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:78)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)