个人中心
gpt4 book ai didi

ReactJS : redirect function don't work (react-router-dom) [duplicate](ReactJS：重定向功能不起作用（react router dom）[重复])

转载 作者：bug小助手 更新时间：2023-10-22 14:29:36 30 4
gpt4 key购买 nike




Good morning,

早上好


I just posted my question here because I can't find any answer anywhere... I'm simply trying to create a redirection with the "redirect" function of "react-router-dom" but it is completely ignored and I don't understand why ...

我刚刚把我的问题贴在这里，因为我在任何地方都找不到答案。。。我只是想用“react router dom”的“重定向”功能创建一个重定向，但它被完全忽略了，我不明白为什么。。。


Imported function:

导入的函数：


{ redirect } from "react-router-dom";

My function:

我的功能：


switchView = () => {
    this.setState((state, props) => {
        const url = state.signup === true ? '/signin' : '/signup';
        redirect(url);
        return {
            signup: !state.signup
        };
    });
}

My implementation:

我的实施：


<Button variant="contained" color="secondary" size="small" fullWidth={true} onClick={this.switchView}>
    {this.state.signup ? 'Connexion' : 'Inscription'}
</Button>

I redid the entire road management part...

我重新设计了整个道路管理部分。。。


Unfortunately I can't go through the useHistory hook because I'm going through a Component class extension. I don't know if you have a solution for this?

不幸的是，我无法通过useHistory挂钩，因为我正在通过Component类扩展。我不知道你是否有解决方案？


Do you have an idea ?

你有主意吗？


Thanking you.

谢谢你。


更多回答

which react-router-dom version you are using ?

您正在使用哪个react路由器dom版本？

"react-router-dom": "^6.15.0"

“react router dom”：“^6.15.0”

I think you can redirect to another component by using useNavigate hook in this verions

我认为您可以在本版本中使用useNavigate钩子重定向到另一个组件

Unfortunately it's an extension of the "Component" class of "React", I can't use the hooks :/

不幸的是，它是“React”的“Component”类的扩展，我不能使用钩子：/

优秀答案推荐

use withRoute hoc for class components and access history object through props

对类组件使用Route hoc，并通过props访问历史对象



If you are working with a class component and need to perform redirection using React Router, you can access the history object by wrapping your component with the withRouter higher-order component (HOC) from "react-router-dom."

如果您正在使用类组件，并且需要使用React Router执行重定向，则可以通过使用“React Router dom”中的withRouter高阶组件（HOC）包装组件来访问历史对象


import React from 'react';
import { withRouter } from 'react-router-dom';

class YourComponent extends React.Component {
  switchView = () => {
    const { history } = this.props;
    const url = this.state.signup ? '/signin' : '/signup';
    history.push(url);
    this.setState((state) => ({
      signup: !state.signup,
    }));
  };

  // Rest of your component code

  render() {
    return (
      <Button
        variant="contained"
        color="secondary"
        size="small"
        fullWidth={true}
        onClick={this.switchView}
      >
        {this.state.signup ? 'Connexion' : 'Inscription'}
      </Button>
    );
  }
}

export default withRouter(YourComponent);

This HOC injects the history prop into your component, allowing you to access the history object and perform the redirection.

这个HOC将历史道具注入到组件中，允许您访问历史对象并执行重定向。


更多回答

This function is no longer available in version 6 I think I'm going to decide to stop using the "Component" class extensions. It's a shame, I find it practical.

这个函数在版本6中不再可用，我想我将决定停止使用“组件”类扩展。真遗憾，我觉得很实用。

@Ylann well i guess i found out ...this guy found an smart way to bring withRoute to react router v6 stackoverflow.com/a/69902006/18018440

@Ylann嗯，我想我发现了。。。这个家伙找到了一个聪明的方法，用Route来反应路由器v6 stackoverflow.com/a/699006/1808440

@Ylann also your question is duplicate of the that question i guess

@Ylann，我猜你们的问题和那个问题是重复的

Yes indeed I hadn't seen it... But after trying it still doesn't work, it's incredible. I'm going to change my way of working instead so that I can use hooks. Thanks for your help.

是的，我确实没见过……但试过之后还是没用，真是不可思议。我要改变我的工作方式，这样我就可以使用钩子了。谢谢你的帮助。

@Ylann FWIW React class components were effectively deprecated when hooks were released in React 16.8.0 back in February 2019. Hooks are the current, and future (at the moment) of, React. I can't recall the last time I wrote a normal class-based React component.

@Ylann FWIW React类组件在2019年2月React 16.8.0中发布钩子时，实际上遭到了抨击。钩子是React的当前和未来（目前）。我记不起上一次写一个基于类的React组件是什么时候了。

No, it looks like it's no longer available in version 6. Here is the error it returns to me: (imported as 'withRouter') was not found in 'react-router-dom' thanks anyway

不，它看起来在版本6中不再可用。这是它返回给我的错误：（以“withRouter”导入）在“react router dom”中找不到，无论如何都要感谢

yes, you are right. In version 6, the withRouter HOC has been removed. Instead, you can use the useNavigate hook to perform programmatic navigation within functional components, and for class components, you can use the useNavigate hook in combination with the useEffect hook.

是的，你是对的。在版本6中，已删除withRouter HOC。相反，您可以使用useNavigate钩子在功能组件中执行程序导航，对于类组件，您可以将useNavigate挂钩与useEffect挂钩结合使用。

30 4 0
文章推荐： Vaadin add icon for error message component(Vaadin为错误消息组件添加图标)
文章推荐： ModuleNotFoundError: No module named 'weasyprint'(ModuleNotFoundError:没有名为“weasyprint”的模块)
文章推荐： Very slow snowsql (cli client) startup(snowsql（cli客户端）启动速度非常慢)
文章推荐： How to "bond" two or more products based on their SKU?(如何根据SKU“绑定”两个或多个产品？)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com