CODEWITHSUNDEEP
reactjsfirebasereact-router
Khant
Khant

Reputation: 1122

Why is my Redirect not working after the verifications?

This following code is trying to verify something then need to redirect to homepage.

const EmailLink = () => {
    
  const testEmailAuth = () => {
    if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
      if (!email) {
        return null;
      }
      firebase
        .auth()
        .signInWithEmailLink(email, window.location.href)
        .then(function(result) {
          window.location.href = '/';
          // <Redirect to="/"/>
        })
        .catch(function(error) {
          console.log('error ' + error);
        });
    }
  };
  return (
    <div className="EmailLink">
      {testEmailAuth()}
    </div>
  );
};

I am trying to redirect with Redirect from react-router-dom. Its not working.

Its is working with window.location.href = '/'. Can I know why? & how to make things works with redirect

<Switch>
          <Route path="/finishedSignUp" component={EmailLink}/>
  </Switch>

export default withRouter(RootComponent);

Upvotes: 2

Views: 270

Answers (3)

Drew Reese
Drew Reese

Reputation: 203198

Since EmailLink is rendered in Switch by a Route component it receives route props. Use the passed history object to handle the redirect using history.replace().

Side note, you should not issue asynchronous calls and side effects from the "render", use an useEffect hook to handle this when the component mounts.

const EmailLink = ({ history, match }) => {

  useEffect(() => {
    const testEmailAuth = () => {
      if (firebase.auth().isSignInWithEmailLink(match.url)) {
        if (!email) {
          return null;
        }
        firebase
          .auth()
          .signInWithEmailLink(email, match.url)
          .then(function(result) {
            history.replace('/'); // <-- replace === redirect
          })
          .catch(function(error) {
            console.log('error ' + error);
          });
      }
    };

    testEmailAuth();
  }, []);

  return (
    <div className="EmailLink" />
  );
};

Upvotes: 1

Mario Petrovic
Mario Petrovic

Reputation: 8352

This piece of code is not located inside Router provider for <Redirect to="/" /> to work.

If you cannot put this code inside filed that is wrapped with Router provider you can make instance for router and use it anywhere in your application:

Also you need to provide your router provider with this instance of browser history

App.jsx

import { createBrowserHistory } from 'history';

export const browserHistory = createBrowserHistory();

const App = () => {
  return <Router history={browserHistory}>...</Router>;
};

Later on you can use it in your code:

import { browserHistory } from 'App';

firebase
  .auth()
  .signInWithEmailLink(email, window.location.href)
  .then(function (result) {
    window.localStorage.removeItem('emailForSignIn');
    browserHistory.push('/');
  })
  .catch(function (error) {
    console.log('error ' + error);
  });

You also need to provide this instance of browserHistory inside your router:

Upvotes: 0

Bogy
Bogy

Reputation: 964

As the documentation says:

Rendering a will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do.

Example:

function App() {
  const [redirect, setRedirect] = useState(null);

  const someFunction = () => {
    //Set redirect to display Redirect and go to /
    setRedirect("/");
  };

  return redirect ? (
    <Redirect to={redirect} />
  ) : (
    <div>{/** rest of your app */}</div>
  );
}

Upvotes: 0

Related Questions