Question

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

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

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

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（）现在已在标记中注释。如果我取消对此功能的注释，则此功能和重定向效果很好。

但是，当我单击标记中的按钮时，重定向将无法进行。为什么重定向无效？

感谢阅读。

Answer 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;

Answer 2

react中没有重定向方案。相反，它只是重新呈现特定的组件。这就是为什么它被视为虚拟DOM。在您的方案中，该组件不会重新呈现。

Answer 3

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

如何在React.js中重定向

3 个答案: