Reactjs 如何将用户重定向到url/“家”；在使用react和typescript完成某个请求之后？

我想在load（）请求使用react完成后将用户重定向到“/主页”

下面是我的代码

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>
    );
}

函数useather（Id:string）{
const[compId，setCompId]=React.useState（未定义）；
const{setIsLoading}=React.useContext（LoadingContext）；
const comp=useCurrentComp（Id）；
const load=useLoad（）；
if（comp&&comp.id！==compId）{
setCompId（comp.id）；
const prevCompId=compId！==未定义；
if（prevCompId）{
设置加载（真）；
加载（）。然后（（）=>{//添加回调以将用户重定向到“/主页”
设置加载（假）；
});
}
}
}
函数Main（{user}:Props）{
UseOther（user.id）；
返回(
(
)}
/>
(
)}
/>
//许多其他类似的路线
);
}

现在，在load（）完成后的UseOther方法中，我想向load方法添加一个回调，以将用户重定向到“/主页”

---

我该怎么做呢。有人能帮我解决这个问题吗。谢谢。

您可以使用

useHistory

钩子重定向用户。 useHistory钩子允许您访问可用于导航的历史实例

从“react router dom”导入{useHistory}；
函数useather（Id:string）{
const[compId，setCompId]=React.useState（未定义）；
const{setIsLoading}=React.useContext（LoadingContext）；
const comp=useCurrentComp（Id）；
const load=useLoad（）；
//使用UseHistoryHook
让历史=使用历史（）；
if（comp&&comp.id！==compId）{
setCompId（comp.id）；
const prevCompId=compId！==未定义；
if（prevCompId）{
设置加载（真）；
加载（）。然后（（）=>{//添加回调以将用户重定向到“/主页”
设置加载（假）；
历史推送（“/主页”）；
});
}
}
}

您可以通过在

history.js中手动创建历史API来控制它：

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

然后，您可以将历史加载到组件中，并在
useather
函数中使用它。请记住，您需要将
开关
组件包装到
路由器
组件，将历史记录作为道具传递

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


//路线

这个答案给出的结果与使用
useHistory
钩子的结果相同，但是在测试组件时提供了更多的控制，因为它避免了模拟
react路由器dom
，并实现了
依赖项注入