0

This code is using if-and condition , if a user is signed-in or just signed-up, then he can stay in browse page otherwise he will be send to the sign-in page and etc.

import React from 'react';
import { Route } from 'react-router-dom';
import {Navigate} from "react-router";




export function IsUserRedirect({ user, loggedInPath, children, ...rest }) {
  return (
    <Route
      {...rest}
      render={() => {
        if (!user) {
          return children;
        }

        if (user) {
          return (
            <Navigate
              to={{
                pathname: loggedInPath,
              }}
            />
          );
        }

        return null;
      }}
    />
  );
}

export function ProtectedRoute({ user, children, ...rest }) {
  return (
    <Route
      {...rest}
      render={({ location }) => {
        if (user) {
          return children;
        }

        if (!user) {
          return (
            <Navigate
              to={{
                pathname: 'signin',
                state: { from: location },
              }}
            />
          );
        }

        return null;
      }}
    />
  );
}

Calling the above function:But is showing the errror {Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')}

import React from 'react';
import { BrowserRouter, Router, Routes, Route } from 'react-router-dom';
import { Home, Browse } from './pages';
import * as ROUTES from './constants/routes';
import { IsUserRedirect, ProtectedRoute } from './helpers/routes';
import { useAuthListener } from './hooks';
import SignIn from "./pages/signin";
import SignUp from "./pages/signup";

export function App() {
  const { user } = useAuthListener();

  return (
    <Router>
      <Routes>
        <IsUserRedirect user={user} loggedInPath={ROUTES.BROWSE} path={ROUTES.SIGNIN}>
          <SignIn />
        </IsUserRedirect>
        <IsUserRedirect user={user} loggedInPath={ROUTES.BROWSE} path={ROUTES.SIGNUP}>
          <SignUp />
        </IsUserRedirect>
        <ProtectedRoute user={user} path={ROUTES.BROWSE}>
          <Browse />
        </ProtectedRoute>
        <IsUserRedirect user={user} loggedInPath={ROUTES.BROWSE} path={ROUTES.HOME}>
          <Home />
        </IsUserRedirect>
      </Routes>
    </Router>
  );
}

[enter image description here][2]

rishav
  • 1
  • Are you sure passing an object like that as Navigate's `to` attribute is correct? –  May 15 '22 at 10:26

1 Answers1

0

It is solved

import React from 'react';
import { BrowserRouter, Router, Route } from 'react-router-dom';
import { Home, Browse } from './pages';
import * as ROUTES from './constants/routes';
import { IsUserRedirect, ProtectedRoute } from './helpers/routes';
import { useAuthListener } from './hooks';
import SignIn from "./pages/signin";
import SignUp from "./pages/signup";
import {Routes, useRoutes} from "react-router";

export function App() {
  const { user } = useAuthListener();

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/browse" element = {
            <ProtectedRoute>
              <Browse />
            </ProtectedRoute>} />
           <Route path="/signup" element = {
             <IsUserRedirect>
              <SignUp />
             </IsUserRedirect>} />
            <Route path="/signin" element = {
             <IsUserRedirect>
              <SignIn />
             </IsUserRedirect>} />
             <Route path="/home" element = {
             <IsUserRedirect>
              <Home />
             </IsUserRedirect>} />





      </Routes>
    </BrowserRouter>
  );
}

import React from 'react';

import {Navigate} from "react-router";
import {useAuthListener} from "../hooks";

export function ProtectedRoute({children}) {
  const auth =useAuthListener();
  return auth ? children : <Navigate to="/signin" />;


}

export function IsUserRedirect({ loggedInPath,children }) {
   const auth =useAuthListener();
  return auth ? children : <Navigate to="/browse" />;
}
rishav
  • 1