如何在 React.js 中重定向答案

【问题标题】：How to redirect in React.js如何在 React.js 中重定向
【发布时间】：2020-03-13 17:46:56
【问题描述】：

我想问你关于 React.js 中的重定向。

下面是https://github.com/supasate/connected-react-router/blob/master/examples/basic/src/components/Home.js中Home.js的修改内容

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

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

const Home = () => {
  console.log('Home');


  const renderRedirect = () => {
    return <Redirect to={{
      pathname: '/counter'
    }} />
  }

  const clicked = () => {
    console.log('clicked');
    return <Redirect to={{
      pathname: '/counter'
    }} />
  }

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

export default Home

现在在标签中注释了函数 renderRedirect()。如果我取消注释这个函数，这个函数和重定向工作得很好。

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

感谢阅读。

【问题讨论】：

没有重定向操作。 clicked 方法只是返回一个<Redirect />，实际上并没有渲染。
当你运行renderRedirect时，它会在你的应用程序中呈现<Redirect />，让react-router知道重定向到哪里，没有这个<Redirect />，它不知道所以什么都不会发生跨度>
看看这个答案：stackoverflow.com/questions/45089386/…。有一些很好的例子可以帮助你。
我认为尝试使用组件在onClick 方法上重新路由是不好的做法。试试上面帖子中提到的this.props.history.push('/path')。

标签： reactjs redirect

【解决方案1】：

这样试试：

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;

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

Clicked 函数只返回 Redirect 组件。但它并没有被附加到 JSX 的任何地方。触发它是一部分，附加它是第二部分。注释掉 renderRedirect 意味着您错过了第二步。

【讨论】：