blocks|key|364412|text|试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|364413|return+<Redirect+to+=+'/signin'+/>+|code-block|syntax|javascript|364414|因为您必须呈现Redirect才能产生效果|offset|length|style|CODE|364415|entityMap^0|0|0|7|8|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Try
<pre><code>return &lt;Redirect to = '/signin' /&gt; 
</code></pre>
Because you have to render the <code>Redirect</code> to make an effect

blocks|key|447456|text|看起来，<Redirect+to+=+'/signin'+/>是一个组件，而不是一个可以调用的JS。组件需要呈现才能运行它们的JS。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|447457|如果您出于某种原因想要具体使用重定向组件，则必须在单击时将其放入DOM中。|447458|entityMap^0|4|R|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

It looks like <code>&lt;Redirect to = '/signin' /&gt;</code> is a component and not a JS that can be called. Components need to be rendered in order for their JS to run.
If you for some reason want to specifically use redirect component you will have to put it into DOM on click.

blocks|key|1264317|text|如果PaymentMethod是一个反应组件，那么history.push需要在具有适当依赖关系的useEffect钩子中调用，或者在回调函数中作为有意的副作用调用，而不是作为渲染体中的意外副作用调用。为了产生任何效果，需要从组件返回Redirect组件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1264318|发出命令式重定向的useEffect示例：|1264319|const+PaymentMethod+=+()+=>+{
++const+history+=+useHistory();

++React.useEffect(()+=>+{
++++if+(!isAuthenticated())+{
++++++toast.error('Please+sign+in+to+continue');
++++++history.replace('/signin');
++++}
++},+[history,+toast]);
++++
++...
};|code-block|syntax|javascript|1264320|发出声明性重定向的<Redirect>示例：|1264321|const+PaymentMethod+=+()+=>+{
++React.useEffect(()+=>+{
++++if+(!isAuthenticated())+{
++++++toast.error('Please+sign+in+to+continue');+//+<--+still+a+side-effect!!
++++}
++},+[toast]);
++++
++if+(!isAuthenticated())+{
++++return+<Redirect+to='/signin'+/>;
++}

++...+regular+JSX+return+...
};|1264322|如果PaymentMethod+是回调函数的，那么必须通过history.replace函数发出命令式重定向，从异步调用的回调返回JSX不会将其呈现给DOM。您也不应该将回调处理程序命名为React函数组件。这是为了消除任何混乱。|BOLD|1264323|const+history+=+useHistory();

...

const+paymentMethodHandler+=+()+=>+{
++if+(!isAuthenticated())+{
++++toast.error('Please+sign+in+to+continue');
++++history.replace('/signin');
++}
};

...|1264324|entityMap^0|2|D|P|C|1D|9|39|8|0|9|9|0|0|9|A|0|0|2|D|T|F|G|6|P|2I|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|1D|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1E|8|@$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|S]|$9|1L|A|1M|B|S]]|D|@]|E|$]]|$1|T|3|U|5|J|7|1N|8|@]|D|@]|E|$K|L]]|$1|V|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]]|W|$]]

If <code>PaymentMethod</code> a React component, then the <code>history.push</code> needs to be called in a <code>useEffect</code> hook with proper dependency or in a callback function as an intentional side-effect, not as an unintentional side-effect in the render body. The <code>Redirect</code> component would need to be returned from the component in order to have any effect.
<code>useEffect</code> Example to issue imperative redirect:
<pre><code>const PaymentMethod = () =&gt; {
 const history = useHistory();

 React.useEffect(() =&gt; {
 if (!isAuthenticated()) {
 toast.error('Please sign in to continue');
 history.replace('/signin');
 }
 }, [history, toast]);
 
 ...
};
</code></pre>
<code>&lt;Redirect&gt;</code> Example to issue declarative redirect:
<pre><code>const PaymentMethod = () =&gt; {
 React.useEffect(() =&gt; {
 if (!isAuthenticated()) {
 toast.error('Please sign in to continue'); // &lt;-- still a side-effect!!
 }
 }, [toast]);
 
 if (!isAuthenticated()) {
 return &lt;Redirect to='/signin' /&gt;;
 }

 ... regular JSX return ...
};
</code></pre>
If <code>PaymentMethod</code> is the callback function then it must issue the imperative redirect via the <code>history.replace</code> function, returning JSX from an asynchronously called callback doesn't render it to the DOM. You should also not name the callback handler like it's a React function component. This is to remove any confusion.
<pre><code>const history = useHistory();

...

const paymentMethodHandler = () =&gt; {
 if (!isAuthenticated()) {
 toast.error('Please sign in to continue');
 history.replace('/signin');
 }
};

...
</code></pre>

blocks|key|364484|text|您可以简单地使用useNavigate()钩子。示例|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|364485|+const+PaymentMethod+=+()+=>{
++++
++if(!isAuthenticated())+
++{
+++++++toast.error('Please+signin+to+continue');
+++++++history.push('/signin')
+++++++useNavigate('/signin')
+++++++
++}|code-block|syntax|javascript|364486|}|364487|entityMap|0|LINK|mutability|MUTABLE|url|https://reactrouter.com/en/main/hooks/use-navigate^0|8|D|O|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

you can simply use <code>useNavigate()</code> hook.
<a href="https://reactrouter.com/en/main/hooks/use-navigate" rel="nofollow noreferrer">example</a>
<pre><code> const PaymentMethod = () =&gt;{
 
 if(!isAuthenticated()) 
 {
 toast.error('Please signin to continue');
 history.push('/signin')
 useNavigate('/signin')
 
 }
 
</code></pre>
}

I have a make payment function which is called on a button click and if the user is not signed in i want to redirect that user to the signin component .
This is my code of the function.
<pre><code> const PaymentMethod = ()=&gt;{
 
 if(!isAuthenticated()) 
 {
 toast.error('Please signin to continue');
 history.push('/signin') //works properly
 // return &lt;Redirect to = '/signin' /&gt; // not working properly
 
 }
 
 }

// isAuthenticated is a boolean function that look whether the user is signed in or not 
</code></pre>

Redirect in React router dom not redirecting to the given path

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个支付功能，这是一个按钮，点击调用，如果用户没有登录，我想重定向该用户到签署组件。这是我的函数代码。  const PaymentMethod = ()=>{              if(!isAuthenticated())       {           toast.error('Please sig...

问在反应性路由器中重定向，而不是重定向到给定路径
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在反应性路由器中重定向，而不是重定向到给定路径EN