React Router Redirect Conditional

Question

I\'m trying to make a button that only redirects the user to a new page after validation is completed correctly.

Is there a way of doing something like this? How to I g

Answer 1

I needed to do this today. Here's my code, mind i decided to make this a HOC that you can choose to wrap or not wrap. For use cases that have multiple redirect cases you'll definitely want to use this inline instead of as a wrapper.

import React from 'react';
import {Redirect} from 'react-router';

interface IConditionalRedirectProps {
    shouldRedirect: boolean,
    to: string
}

export const ConditionalRedirect: React.FC = (props) => {
    const {shouldRedirect, to, children} = props;

    if (shouldRedirect) {
        console.log('redirecting');
        return 
    } else {
        return (
            <>
                {children}
            
        )
    }
};

Usage: