Reactjs 如何在React.js中重定向

我想问一下关于React.js中重定向的问题

下面是Home.js在中的修改内容

（这不是我的私人GitHub Repo！它是开源库）

import React，{useState}来自“React”
从“react router dom”导入{Redirect}
常量Home=（）=>{
console.log（'Home'）；
常量renderDirect=（）=>{
返回
}
常量单击=（）=>{
console.log（'clicked'）；
返回
}
返回(
家
{/*{renderDirect（）}*/}
单击（）}>计数器
)
}
导出默认主页

函数renderDirect（）现在在标记中注释。如果我取消对这个函数的注释，这个函数和重定向工作得很好

但当我点击标签中的一个按钮时，重定向将不起作用。为什么重定向没有效果

感谢阅读。

请尝试以下方法：

import React, { useState } from 'react'
import { Redirect } from 'react-router-dom'

const Home = () => {
  console.log('Home');
  constructor(props){
   this.state={
    isRedirect : false;
 }
}
  const renderRedirect = () => {
  if (this.state.isRedirect) {
    return (
     <Redirect to={{
      pathname: '/counter'
     }}
    />
   );
 }
}

  const clicked = () => {
    console.log('clicked');
    this.setState({
     isRedirect :true
    })
  }

  return (
    <div>
      Home
       {renderRedirect()} 
      <button onClick={() => clicked()}>counter</button>
    </div>
  )
}

export default Home;

import React，{useState}来自“React”
从“react router dom”导入{Redirect}
常量Home=（）=>{
console.log（'Home'）；
建造师（道具）{
这个州={
isRedirect:false；
}
}
常量renderDirect=（）=>{
if（this.state.isRedirect）{
返回(
);
}
}
常量单击=（）=>{
console.log（'clicked'）；
这是我的国家({
isRedirect：对
})
}
返回(
家
{renderDirect（）}
单击（）}>计数器
)
}
导出默认主页；

react中没有重定向场景。相反，它只是重新渲染特定组件。这就是为什么它被认为是虚拟DOM。在您的场景中，组件不会重新呈现。

单击的函数仅返回重定向组件。但它并没有被附加到JSX的任何地方。触发它是一部分，附加它是第二部分。注释掉RenderDirect意味着您错过了第二步。

没有重定向操作。单击的方法只返回一个未实际呈现的

。当您运行

renderDirect

时，它会在应用程序中呈现

，让

react router

知道重定向到何处，如果没有此

，它不知道，因此不会发生任何事情请查看以下答案：。这里有一些很好的例子可以帮助您。我认为尝试使用组件在

onClick

方法上重新路由是不好的做法。尝试上面帖子中提到的

this.props.history.push（'/path'）

。