How to redirect user to url "/home" after some request is complete using react and typescript?

Question

i want to redirect user to "/home" page after the load() request completes using react.

below is my code,

function useAnother(Id: string) {
    const [compId, setCompId] = React.useState(undefined);
    const {setIsLoading} = React.useContext(LoadingContext);
    const comp = useCurrentComp(Id);
    const load = useLoad();
    if (comp && comp.id !== compId) {
        setCompId(comp.id);
        const prevCompId = compId !== undefined;
        if (prevCompId) {
            setIsLoading(true);
            load().then(() => {//add  a callback to redirect user to "/home" page
                setIsLoading(false); 
            });
        }
    }
}

function Main ({user}: Props) {
    useAnother(user.id); 
    return (
        <Wrapper>
            <React.suspense>
                <Switch>
                    <Route 
                        path="/" 
                        render={routeProps => (
                            <FirstComp {...routeProps} />
                        )}
                    />
                    <Route 
                        path="/items" 
                        render={routeProps => (
                            <SecondComp {...routeProps} />
                        )}
                     />
                     //many other routes like these
                 </Switch>
            </React.suspense>
        </Wrapper>
    );
}

Now within useAnother method after load() finishes i want to add a callback to load method to redirect user to "/home" page.

how can i do it. could someone help me solve this. thanks.

Answer 1

You can control history API by manually creating it in history.js:

import { createBrowserHistory } from 'history'
export default createBrowserHistory()

Then you can load history to your component and use it in useAnother function. Bear in mind that you need to wrap Switch component to Router component passing the history as a prop.

<Router history={history}>
    <Switch>
        // routes
    </Switch/>
</Router>

This answer gives the same result as using the useHistory hook, however gives more control when you test the component since it avoids to mock react-router-dom and implements dependency injection

Answer 2

You can use the useHistory Hook to Redirect the User. The useHistory hook gives you access to the history instance that you may use to navigate.

import { useHistory } from "react-router-dom";

function useAnother(Id: string) {
    const [compId, setCompId] = React.useState(undefined);
    const {setIsLoading} = React.useContext(LoadingContext);
    const comp = useCurrentComp(Id);
    const load = useLoad();
    // Using useHistory Hook
    let history = useHistory();
    if (comp && comp.id !== compId) {
        setCompId(comp.id);
        const prevCompId = compId !== undefined;
        if (prevCompId) {
            setIsLoading(true);
            load().then(() => {//add  a callback to redirect user to "/home" page
                setIsLoading(false); 
                history.push("/home");
            });
        }
    }
}