CODEWITHSUNDEEP
reactjs
Shivam Sahil
Shivam Sahil

Reputation: 4925

How to pass props in a route component Element of React JS?

Here is how my app.js looks like:

import React from 'react';
import StarterScreen from './components/StarterScreen.jsx';
import LoginScreen from './components/LoginScreen.jsx';
import RegisterScreen from './components/RegisterScreen.jsx';
import DisplayScreen from './components/DisplayScreen.jsx';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import {BrowserRouter,Route,Switch} from 'react-router-dom';
  return function App(){
    <div className="App">
    <BrowserRouter>
    <Switch>
    <Route component={StarterScreen} exact path="/"></Route>
    <Route component={RegisterScreen} exact path="/register"></Route>
    <Route component={LoginScreen} exact path="/login"></Route>
    <Route component={DisplayScreen} exact path="/login-props-test"></Route>
    </Switch>
    </BrowserRouter>
    </div>
  );
}

export default App;

I have two major objective in the above snippet:

  1. To pass the props.isLoggedIn in the code <Route component={DisplayScreen} exact path="/login-props-test"></Route>. I know there are ways to pass props while using components like: <DisplayScreen isLoggedIn={true} /> But how do I pass it in this Route component element?
  2. To pass the props.isLoggedIn in a function: the function is as follows:
function checkLogin(props)
{
  if(props.Authentication===true)
      props.history.push('/login-props-test'); 
}

I want to pass props.isLoggedIn into this function as well. Any way to execute these two processes?

Upvotes: 0

Views: 507

Answers (2)

Geku
Geku

Reputation: 113

I would follow this approach to protect routes (an reuse the code, which is always good)

First, create a component that will act as a Route wrapper.

import React from "react";
import PropTypes from "prop-types";
import { Route, Redirect } from "react-router-dom";
import { useAuthContext } from "services/auth-provider";

const PrivateRoute = ({ component, ...options }) => {
  const { accessToken } = useAuthContext();

  if (!accessToken) {
    return <Redirect to={{ pathname: "/login" }} />;
  }
  return <Route {...options} component={component} />;
};

PrivateRoute.defaultProps = {};

PrivateRoute.propTypes = {
  component: PropTypes.elementType.isRequired
};

export default PrivateRoute;

Following this approach you can redirect to the login page if they are not authed or the token is invalid (or whatever condition you want to check) and also is fully reusable.

You can then use it like this:

const Router = () => (
  <BrowserRouter>
    <Switch>
      <Route component={StarterScreen} exact path="/"></Route>
      <Route component={RegisterScreen} exact path="/register"></Route>
      <Route component={LoginScreen} exact path="/login"></Route>
      <PrivateRoute component={DisplayScreen} exact path="/login-props-test"></PrivateRoute>
    </Switch>
  </BrowserRouter>
);

Upvotes: 2

Pranav Agarwal
Pranav Agarwal

Reputation: 99

just use this instead

import React from 'react';
import StarterScreen from './components/StarterScreen.jsx';
import LoginScreen from './components/LoginScreen.jsx';
import RegisterScreen from './components/RegisterScreen.jsx';
import DisplayScreen from './components/DisplayScreen.jsx';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import {BrowserRouter,Route,Switch} from 'react-router-dom';
  return (
    <div className="App">
    <BrowserRouter>
    <Switch>
    <Route component={()=> <StarterScreen your_prop={here} />} exact path="/"></Route>
    <Route component={()=> <RegisterScreen your_prop={here} />} exact path="/register"></Route>
    <Route component={()=> <LoginScreen your_prop={here} />} exact path="/login"></Route>
    <Route component={()=> <DisplayScreen your_prop={here} />} exact path="/login-props-test"></Route>
    </Switch>
    </BrowserRouter>
    </div>
  );
}

export default App;

changed code is:

<Switch>
    <Route component={()=> <StarterScreen your_prop={here} />} exact path="/"></Route>
    <Route component={()=> <RegisterScreen your_prop={here} />} exact path="/register"></Route>
    <Route component={()=> <LoginScreen your_prop={here} />} exact path="/login"></Route>
    <Route component={()=> <DisplayScreen your_prop={here} />} exact path="/login-props-test"></Route>
</Switch>

or you can use this as well

<Switch>
      <Route exact path="/">
          <StarterScreen your_prop={here} />
      </Route>
      <Route exact path="/register">
          <RegisterScreen your_prop={here} />
      </Route>
      <Route exact path="/login">
          <LoginScreen your_prop={here} />
      </Route>
      <Route exact path="/login-props-test">
          <DisplayScreen your_prop={here} />
      </Route>
</Switch>

Upvotes: 1

Related Questions