Re-render header after user logs in or logs out in react

Asked
Active3 hr before
Viewed126 times

10 Answers

renderheaderreact
90%

Advertising Reach developers & technologists worldwide ,and here is basically how i handle getting to homepage after user logs in, Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers

The main router component should be clean.

<Router>
   <Switch>
      <Route exact path="/" component={HomePage} >
        <Header />
      </Route>
      <Route exact path="/Login/:step?" component={Login}>
        <Header />
      </Route>
   </Switch>
</Router>
88%

Redirect the user to the homepage after they login., Also, import useHistory from React Router in the header of src/containers/Login.js., Import useHistory from React Router in the header of src/App.js.

const history = useHistory();
load more v
72%

In this guide, we are going to learn how to redirect a user after a successful login.. Usually, when we are building web apps, there's a requirement that the user must be logged in to use the app. In that case, we need to take care of the user's identity and manage his authentication token in the application state and redirect the user to protected routes.,If the user is not authenticated, we will redirect to the index page; otherwise, we will redirect to the home page.,In the <Navbar /> component, we are merely creating the navigation menu for our application. Notice that I have used the <AppBar /> component from material-ui to give it a native look.

1n pm i @material - ui / core @material - ui / lab
load more v
65%

When strict mode is enabled, React compiles a list of all class components using the unsafe lifecycles, and logs a warning message with information about these components, like so:,StrictMode is a tool for highlighting potential problems in an application. Like Fragment, StrictMode does not render any visible UI. It activates additional checks and warnings for its descendants.,Render phase lifecycles include the following class component methods:

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>      <Footer />
    </div>
  );
}
load more v
75%

If the user is logged in, render the <AuthenticatedNav> component,If the user is NOT logged in, render the <UnauthenticatedNav> component.,It turns out, I had a fundamental misunderstanding about how React works in a server-side-rendering context. And I think many React devs share this misunderstanding! And it can have some pretty serious ramifications.

Pretag
 Pretag team - issue, fix, solve, resolve
40%

with-authentication-required ,Auth0 SDK for React Single Page Applications (SPA)., auth0-context

Using npm

npm install @auth0 / auth0 - react
load more v
22%

By the end of this step, you’ll have a basic application that will render a login page when a user is not logged into the application.,By the end of this tutorial, you’ll be able to add authentication to a React application and integrate the login and token storage strategies into a complete user workflow.,By the end of this step, you’ll be able to choose a storage approach based on the goals for your application.

Pretag
 Pretag team - issue, fix, solve, resolve
60%

This guide assumes that you have already created a MongoDB Realm application and enabled anonymous authentication.,Generate a new application template using create-react-app:,© MongoDB, Inc 2008-present. MongoDB, Mongo, and the leaf logo are registered trademarks of MongoDB, Inc.

.leafygreen - ui - iokrs {
   color: inherit;font - size: 13 px;font - family: 'Source Code Pro',
   Menlo,
   monospace;line - height: 24 px;
}.leafygreen - ui - 1 v41da1 {
   border - spacing: 0;
   width: 100 % ;
}.leafygreen - ui - 7 razhx {
   border - spacing: 0;
   vertical - align: top;
   padding: 0 16 px;
}
cd realm - web - react - quickstartnpm install--save realm - web
load more v
48%

Create a callback in the parent component which takes in the data needed as a parameter. , Send data from the child component using the callback. , Pass this callback as a prop to the child component.

const text = React.createElement('p', {}, 'This is a text');
const container = React.createElement('div', '{}', text);
ReactDOM.render(container, rootElement);
load more v
23%

We can force React to re-render a component, even when there is no need for the update by using a non-reference useState update function.,Frequently updating state in a React component using useState hook can cause undesired effects. We have also seen while variables can be a go-to option; they are not persisted across the re-render of a component like a state is persisted.,After the evolution of functional components, functional components got the ability to have a local state that causes re-rendering of the component once there is an update to any of their local state.

function Card (props) {
  let toggled = false;
  
  const handleToggleBody = () => {
    toggled = true;
    console.log(toggled);
  };

  useEffect(() => {
    console.log(“Component rendered, the value of toggled is:“, toggled);
  }, [props.title]);

  return (
    <section className=“card”>
      <h3 className=“card__title” onMouseMove={handleToggleBody}>
        {props.title}
      </h3>

      {toggled && <article className=“card__body”>{props.body}</article>}
    </section>
  );
}

// Renders the application
function App () {
  
  const [cardDetails, setCardDetails] = useState({
    title: “Something”,
    body: “uniquely done”,
  });

  useEffect(() => {
    setTimeout(() => {
      setCardDetails({
        title: “We”,
        body: “have updated something nice”,
      });
    }, 5000); // Force an update after 5s
  }, []);

  return (
    <div>
      <Card title={cardDetails.title} body={cardDetails.body} />
    </div>
  );
}
load more v

Other "render-header" queries related to "Re-render header after user logs in or logs out in react"