I am trying to manage session after successful login while redirecting to some page on form submit.

I would do this usually, in a class ponent:

ponentDidMount() {
    if (context.token) {
        return <Redirect to="/" />
    }
}

But I want to use React hooks, therefore; the following code is not redirecting anywhere:

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route, Redirect, Link } from "react-router-dom";
es6
const HomePage = props => (
  <div>
    <h1>Home</h1>
  </div>
);

const AboutUsPage = props => {
  useEffect(() => {
    redirectTo();
  }, []);
  return (
    <div>
      <h1>About us</h1>
    </div>
  );
};

function redirectTo() {
  return <Redirect to="/" />;
}

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/us">About us</Link>
        </nav>
        <Switch>
          <Route exact path="/" ponent={HomePage} />
          <Route exact path="/us" ponent={AboutUsPage} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Working sandbox:

I have read that if the hook useEffect() returns a function it will only work when the ponent unmounts. But it should redirect when the ponent is being mounted.

Any suggestions? Thanks in advance.

I am trying to manage session after successful login while redirecting to some page on form submit.

I would do this usually, in a class ponent:

ponentDidMount() {
    if (context.token) {
        return <Redirect to="/" />
    }
}

But I want to use React hooks, therefore; the following code is not redirecting anywhere:

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route, Redirect, Link } from "react-router-dom";
es6
const HomePage = props => (
  <div>
    <h1>Home</h1>
  </div>
);

const AboutUsPage = props => {
  useEffect(() => {
    redirectTo();
  }, []);
  return (
    <div>
      <h1>About us</h1>
    </div>
  );
};

function redirectTo() {
  return <Redirect to="/" />;
}

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/us">About us</Link>
        </nav>
        <Switch>
          <Route exact path="/" ponent={HomePage} />
          <Route exact path="/us" ponent={AboutUsPage} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Working sandbox: https://codesandbox.io/s/blue-river-6dvyv?fontsize=14

I have read that if the hook useEffect() returns a function it will only work when the ponent unmounts. But it should redirect when the ponent is being mounted.

Any suggestions? Thanks in advance.

• javascript
• reactjs
• ecmascript-6
• react-router
• react-hooks

3 Answers 3

You could set redirect variable on the state and based on it redirect in render:

const AboutUsPage = props => {
  const [redirect, setRedirect] = useState(false);

  useEffect(() => {
    setRedirect(true); // Probably need to set redirect based on some condition
  }, []);

  if (redirect) return redirectTo();
  return (
    <div>
      <h1>About us</h1>
    </div>
  );
};

You could have it so that the ponent selectively renders the page based on whether or not the page is given a token.

const AboutUsPage = ({token}) => (
  token ? (
    <Redirect to="/" />
  ) : (
    <div>
      <h1>About us</h1>
    </div>
  )
);

However, if you would still like to use context when implementing this with React Hooks you can read up on how to use context with hooks in this article. It shows you how you can incorporate context into React with only a few lines of code.

import React, {createContext, useContext, useReducer} from 'react';
export const StateContext = createContext();
export const StateProvider = ({reducer, initialState, children}) =>(
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);
export const useStateValue = () => useContext(StateContext);

Done with hooks and context, your AboutUsPage ponent would resemble something like this.

import { useStateValue } from './state';
const AboutUsPage = () => {
  const [{token}, dispatch] = useStateValue();
  return token ? (
    <Redirect to="/" />
  ) : (
    <div>
      <h1>About us</h1>
    </div>
  );
};

import {Redirect, Switch} from "react-router-dom";

and inside Switch....

<Switch>
      <Redirect exact from="/" to="/home" />
</Switch>

This solved my issue.