Ionic react router trouble

Ionic Framework Ionic React
1

Hello, i tried to make router with auth and have a trouble. When i authorize in app and component Router re-renders url stay /login, i tried to redirect from not implemented page to /home, and the problem is when i try to navigate to profile which have params, params when i go to the page profile is null, and i noticed when i delete Redirect component and manually go to the profile page via tab button it work correctly and params is an object with id for example in my case.

const Router: React.FC = () => {

    const dispatch = useAppDispatch();

    const {isAuth, currentUser} = useAppSelector(state => state.userReducer)

    useEffect(() => {
        if(localStorage.getItem('accessToken'))
            dispatch(userRefresh())
    }, [])

    if(!isAuth)
        return (
            <IonReactRouter>
                <IonRouterOutlet animated={false}>
                    <Route path="/login" component={Login}/>
                    <Route path="/recovery" component={Recovery}/>
                    <Route path="/register" component={Register}/>

                    <Route render={() => <Redirect to="/login"/>}/>
                </IonRouterOutlet>
            </IonReactRouter>
        );

    return (
        <IonReactRouter>
            <IonTabs>
                <IonRouterOutlet animated={false}>
                    <Route path="/home" component={Home}/>
                    <Route path="/music" component={Music}/>
                    <Route path="/messages" component={Messages}/>

                    <Route path="/profile/:id" component={Profile}/>
                    <Route path="/dialog/:id" component={MessageBox}/>

                    <Redirect to={"/home"}/>
                </IonRouterOutlet>

                <IonTabBar slot="bottom" className={"tabs ion-padding-vertical"}>
                    <IonTabButton tab="home" href="/home">
                        <IonIcon icon={homeOutline} />
                    </IonTabButton>

                    <IonTabButton tab="messages" href="/messages">
                        <IonIcon icon={chatbubbleOutline} />
                        <IonBadge color="success">180</IonBadge>
                    </IonTabButton>

                    <IonTabButton tab="music" href="/music">
                        <IonIcon icon={musicalNoteOutline} />
                    </IonTabButton>

                    <IonTabButton tab="profile" href={`/profile/${currentUser!.id}`}>
                        <IonIcon icon={personOutline} />
                    </IonTabButton>
                </IonTabBar>
            </IonTabs>
        </IonReactRouter>
    );
};
2

Problem still exists. UP.

3

I don’t think you can use a <Redirect> component when conditionally rendering two different <IonReactRouter>. After awaiting the login result, try using useHistory() and history.push() instead of a <Redirect>.

1 Like
5

You might be able to use useHistory() with useEffect() in a custom hook.

Another approach is to refactor your router and use one router, not two, and then redirect the user if a user who has not logged in tries to access an authorized route.

Here’s an example from an app I built:

                    <Route
                      exact
                      path={routeUserCancel}
                      render={(props) =>
                        handleAuthRoute(userObject, <PageUserCancel />)
                      }
                    />


const handleAuthRoute = (userObject: User, component: JSX.Element) => {
  if (userObject.isLoggedIn) {
    // eslint-disable-next-line react/jsx-no-useless-fragment
    return <>{component}</>;
  }
  return <RedirectToLogin />;
};
1 Like
6

Oh, this way seems good, thanks, I’ll give it a try.

7

Thats a lot, i finally fixed that.