CODEWITHSUNDEEP
reactjstypescriptreact-routerreact-router-domoutlet
tawan888
tawan888

Reputation: 11

How to redirect authorized user with <Outlet />React-router-dom

I have a PrivateRoute that contains another private pages. The problem is that after check, I getting a blank page because my home page '/' is empty. I used in PrivateRoute component and I need to redirect authorized user on the '/profile' page. Or maybe to change my code with other component. Thank you for help

its an App.tsx

  <BrowserRouter basename={PATHS.home}>
        <Routes>
          <Route path="/" element={<PrivateRoute />}>
            <Route path={PATHS.profile} element={<Profile />} />
            <Route path={PATHS.myDocs}>
              <Route index element={<MyDocs />} />
          </Route>
          <Route
            path={PATHS.signIn}
            element={
              <AnonymousRoute>
                <SignIn />
              </AnonymousRoute>
            }
          />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </BrowserRouter>

its a PrivateRoute component

import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';

import { PATHS } from 'constants/routes';
import { getAuth } from 'utils/getAuth';

const PrivateRoute: React.FC<React.ReactNode> = () => {
  const auth = getAuth();
  return auth ? <Outlet /> : <Navigate to={PATHS.signIn} />;
};

export default PrivateRoute;

and this is a screen with the blank page...

enter image description here

Because Outlet reed exact path '/' and not going down... can not resolve it

Upvotes: 1

Views: 2701

Answers (1)

artworkjpm
artworkjpm

Reputation: 1347

Keep your PrivateRoute component as is and do this to your App.tsx:

 <Route path="/" element={<PrivateRoute />}>
            <Route path="/" element={<Navigate to={PATHS.profile} replace />} />
            <Route path={PATHS.profile} element={<Profile />} />
            <Route path={PATHS.myDocs}>
            <Route index element={<MyDocs />} />
 </Route>

When auth is true it will activate the children and because your route is "/" it will redirect to "/profile"

Upvotes: 2

Related Questions