ReactJS 如何使用`history.goBack()`定义状态

本文将演示如何在使用history.goBack()时定义并访问状态。在导航过程中使用状态有助于存储要在history.goBack()中使用的路径和路由。让我们创建一个项目来展示在ReactJS中使用状态进行导航的用法。

安装步骤

步骤1： 在VS Code IDE中使用以下命令创建一个React应用程序。

npx create-react-app  <<folder_name>>

步骤2： 在创建项目文件夹后，使用以下命令在 VS Code 终端中移动到该文件夹。

cd <<folder_name>>

步骤3: 由于我们使用了 React-Router 包，我们需要使用以下命令进行安装。

注意: react-router-dom 6.0.0 版本中不再提供 history.goBack() 函数。所以在这个示例中，我们安装的是 5.1.2 版本。

npm install react-router-dom@5.1.2

项目结构

ReactJS 如何使用history.goBack()定义状态

下面是用于依赖项参考的package.json文件:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

方法

在App.js文件中，我们编写了主应用组件。我们使用BrowserRouter启用了路由，并使用react-router-dom包中的Route定义了三个路由，分别对应Home、About和Contact组件。
我们在Contact组件中定义了包含正确信息的state对象。
然后使用history.push()函数在应用中导航到新的路由，同时发送了state信息。首先，我们将路由路径作为第一个参数传递，然后将state作为第二个参数传递。history.push(‘/about’, { message: “从Contact页面返回” })。
在About组件中，我们使用了’useLocation()’钩子，它使用location.state访问state信息，并将state数据显示给用户。

示例： 此示例展示了在ReactJS中使用history.goBack()时如何定义state。

//App.js 
import React from "react"; 
import { 
    BrowserRouter as Router, 
    Route, 
    Link, 
} from "react-router-dom"; 
import Home from "./components/Home"; 
import About from "./components/About"; 
import Contact from "./components/Contact"; 
  
const App = () => { 
    return ( 
        <Router> 
            <div> 
                <nav> 
                    <ul> 
                        <li> 
                            <Link to="/">Home</Link> 
                        </li> 
                        <li> 
                            <Link to="/about">About</Link> 
                        </li> 
                        <li> 
                            <Link to="/contact"> 
                                Contact 
                            </Link> 
                        </li> 
                    </ul> 
                </nav> 
  
                <Route exact path="/" component={Home} /> 
                <Route path="/about" component={About} /> 
                <Route 
                    path="/contact"
                    component={Contact} 
                /> 
            </div> 
        </Router> 
    ); 
}; 
  
export default App;

//components/Home.js 
import React from 'react'; 
  
const Home = () => { 
  return ( 
    <div> 
      <h1>Home Page</h1> 
      <p>Welcome to GeeksforGeeks website!</p> 
    </div> 
  ); 
}; 
  
export default Home;

//components/About.js 
import React from "react"; 
import { useLocation } from "react-router-dom"; 
  
const About = () => { 
    const location = useLocation(); 
    const state = location.state; 
  
    return ( 
        <div> 
            <h1>About Us</h1> 
            <p> 
                GeeksforGeeks is a leading platform that 
                provides computer science resources and 
                coding challenges for programmers and 
                technology enthusiasts, along with interview 
                and exam preparations for upcoming 
                aspirants. 
            </p> 
            {state && state.message && ( 
                <div style={ 
                    {  
                        backgroundColor: "yellow",  
                        padding: "10px" }}> 
                    <p> 
                        Returned from: <strong>{state.message}</strong> 
                    </p> 
                </div> 
            )} 
        </div> 
    ); 
}; 
  
export default About;

//components/Contact.js 
import React from "react"; 
import { useHistory } from "react-router-dom"; 
  
const Contact = () => { 
    const history = useHistory(); 
  
    const handleGoBack = () => { 
      const state = {  
          message: "Returning from Contact page" }; 
      history.push('/about', state); 
  }; 
  
    return ( 
        <div> 
            <h1>Contact Us</h1> 
            <p> 
                You can contact us at 
                support@geeksforgeeks.org 
            </p> 
            <button onClick={handleGoBack}> 
                Go Back 
            </button> 
        </div> 
    ); 
}; 
  
export default Contact;

运行应用程序的步骤：

在Web浏览器中调试应用程序，我们需要在终端中运行以下命令：