React中如何切换组件？React Router v6下创建内容后跳转至主组件的实现问题

在React Router v6中，类组件没法直接使用useNavigate钩子（这个钩子仅支持函数组件），而且v5里依赖history对象的跳转方式也已经被弃用了。针对你的场景，这里有两种可行的解决方案：

方法一：通过props传递navigate函数 #

这是最直接的编程式跳转方式，思路是在父级函数组件中获取navigate函数，再传递给你的类组件：

1. 在父组件/路由配置中传递navigate
   假设你在App.js或者路由配置组件中渲染CreateContent，先引入useNavigate并获取跳转函数，再作为props传入：

   import { Routes, Route, useNavigate } from 'react-router-dom';
   import CreateContent from './CreateContent';
   import MainComponent from './MainComponent';
   
   function App() {
     const navigate = useNavigate();
     return (
       <Routes>
         <Route path="/create" element={<CreateContent navigate={navigate} />} />
         <Route path="/main" element={<MainComponent />} />
       </Routes>
     );
   }
   

2. 在CreateContent中调用跳转
   修改你的addContent方法，直接使用props传入的navigate函数：

   addContent = async (e) => {
     e.preventDefault();
     try {
       const response = await fetch('http://localhost:9000/api/v1/content', {
         method: 'POST',
         body: JSON.stringify(this.state.content),
         mode:'cors',
         headers: {
           'Content-Type': 'application/json' 
           // 注意：`Access-Control-Allow-Origin`是后端需要设置的响应头，前端请求不需要添加这个字段
         }
       });
       if(!response.ok) {
         throw Error(response.statusText)
       }
       // 调用props中的navigate实现跳转
       this.props.navigate('/main');
     } catch (err) {
       console.log('addContent failed -', err)
     }
   }
   

方法二：使用Navigate组件（声明式跳转） #

这种方式利用React的状态驱动渲染，通过状态控制是否渲染跳转组件：

1. 添加跳转状态并修改请求逻辑
   首先在组件的state中新增一个控制跳转的状态，然后在请求成功后更新状态：

   import React, { Component } from 'react';
   import { Navigate } from 'react-router-dom'; // 记得导入Navigate组件
   
   class CreateContent extends Component {
     constructor(props) {
       super(props);
       this.state = {
         content: { title: '' },
         shouldNavigate: false // 新增跳转控制状态
       }
     }
   
     handleInput = (e) => {
       this.setState({ content : { ...this.state.content, [e.target.name]: e.target.value } })
     }
   
     addContent = async (e) => {
       e.preventDefault();
       try {
         const response = await fetch('http://localhost:9000/api/v1/content', {
           method: 'POST',
           body: JSON.stringify(this.state.content),
           mode:'cors',
           headers: {
             'Content-Type': 'application/json'
           }
         });
         if(!response.ok) {
           throw Error(response.statusText)
         }
         // 更新状态触发跳转
         this.setState({ shouldNavigate: true });
       } catch (err) {
         console.log('addContent failed -', err)
       }
     }
   

2. 根据状态渲染跳转组件
   在render方法中先判断跳转状态，如果为true则渲染Navigate组件：

   render() {
       // 如果需要跳转，直接返回Navigate组件
       if (this.state.shouldNavigate) {
         return <Navigate to="/main" />;
       }
       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
   

两种方法都能实现你的需求，方法一更偏向传统的编程式逻辑，方法二更符合React状态驱动的设计理念，你可以根据自己的习惯选择。

内容的提问来源于stack exchange，提问作者Cindy