如何在 React 中切换组件？ [复制]

Question

我想让用户在创建内容后移动主要组件，我不知道我需要使用什么方法。我想使用类似历史的东西，但它没有用。我正在使用

• “反应”：“^17.0.2”，
• "react-dom": "^17.0.2",
• "react-router-dom": "^6.2.1",

import React, { Component } from 'react';

class CreateContent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: {
        title: ''
      }
    }
  }

  handleInput = (e) => {
    this.setState({
      content : {
        ...this.state.content,
        [e.target.name]: e.target.value
      }
    })
  }

  addContent = async (e) => {
    e.preventDefault();
    console.log(JSON.stringify(this.state.title))
    try {
      const response = await fetch('http://localhost:9000/api/v1/content', {
        method: 'POST',
        body: JSON.stringify(this.state.content),
        mode:'cors',
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Content-Type': 'application/json'
        }
      });

      if(!response.ok) {
        throw Error(response.statusText)
      }
// ******* HERE I wanted to add something like *******
      history.push('/main')
    } catch (err) {
      console.log('addContent failed -', err)
    }
  }

  render() {
    return (
      <div>
        <form onSubmit={this.addContent}>
          <input
            type="text"
            name="title"
            onChange={this.handleInput}
            value={this.state.content.title}
          />
          <input type="submit" value="submit" />
        </form>
      </div>
    )
  }
}

export default CreateContent

Answer 1

在React Router v6 中，您需要使用 useNavigate 而不是 history.push()。

但是，由于您使用的是 类组件 React Router v6 it doesn't support these hooks out of the box for the class components。这就是您收到错误的原因：

错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。

但这并不意味着你不能使用它。您可以使用 HOC 重新创建它：

import {
  useLocation,
  useNavigate,
  useParams
} from "react-router-dom";

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    let location = useLocation();
    let navigate = useNavigate();
    let params = useParams();
    return (
      <Component
        {...props}
        router={{ location, navigate, params }}
      />
    );
  }

  return ComponentWithRouterProp;
}

您现在可以以非常熟悉的方式将基于类的组件包装并导出到 withRouter HOC。

之后，您可以使用useNavigate 中的react-router-dom v6。

const navigate = useNavigate()
navigate("/main")

关于您在评论中提到的查询：

那么我应该创建一个单独的组件来添加上面的代码，还是应该为我想要使用历史记录的每个组件添加上面的代码？还是应该将其添加到 App.js 中？

要首先解决此问题，请按照上述说明创建一个新组件withRouter，然后在导出时将CreateContent 组件包装在withRouter 函数中：

export default withRouter(CreateContent)

withRouter 将在渲染时将更新的匹配、位置和历史道具传递给包装的组件。

withRouter v5 中的引用：https://v5.reactrouter.com/web/api/withRouter

Answer 2

你可以在react中以多种方式实现重定向。

1- 只使用 react-router-dom 中的链接

<Link to={"/my-route"} />

2- 你可以使用 react-router-dom 中的 useNavigate

const navigate = useNavigate()
navigate("/my-route")

3- 如果

，您可以简单地使用状态来显示/隐藏组件

const [visibleComponent, setVisibleComponent] = useState('component1')
<Component1 isVisible={visibleComponent === 'component1'} />
<Component2 isVisible={visibleComponent === 'component2'} />
<Component3 isVisible={visibleComponent === 'component3'} />

然后您可以根据您的逻辑更改组件（ setVisibleComponent('component2') 以显示第二个组件，依此类推...