在路由反应中传递数据 - JavaScript

在JavaScript中，路由反应是基于路由的应用程序的一个非常重要的部分。通过路由反应，我们可以方便地向应用程序中的不同页面传递数据。 在这里，我们将了解如何在路由反应中传递数据以及它的工作原理。

工作原理

在JavaScript中，路由反应是允许我们在应用程序中调整显示内容的一种机制。当用户从一个页面导航到另一个页面时，路由反应来保持页面状态并更新网址。

当我们使用路由反应时，可以很容易地传递和接收数据。 我们可以通过使用路由参数将数据传递给路由，并在目标组件中使用这些参数。

下面是一个基本示例，演示如何使用React Router在路由反应中传递数据：

// App.js

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <div>
        <Route exact path="/" component={Home} />
        <Route path="/about/:name" component={About} />
      </div>
    </Router>
  );
}

export default App;

在我们的应用程序中，我们有两个主要的页面Home和About。Home页面是我们的默认首页，而About页面需要一个名字。 我们使用路由参数:name来接收这个名字。

// Home.js

import React from 'react';
import { Link } from 'react-router-dom';

const Home = () => (
  <div>
    <h1>Home</h1>
    <Link to="/about">
      <button>Learn more</button>
    </Link>
  </div>
);

export default Home;

在我们的首页中，我们使用组件链接到关于页面。 当用户点击该链接时，我们将导航到/about路由。

// About.js

import React from 'react';
import { useParams } from 'react-router-dom';

const About = () => {
  const { name } = useParams();
  return (
    <div>
      <h1>About {name}</h1>
    </div>
  );
};

export default About;

在我们的About页面中，我们使用React Router的useParams() hook来获取在路由参数中传递的name。 我们可以将该name用于页面渲染。

结论

通过React Router，我们可以方便地在路由反应中传递数据。 我们可以使用路由参数来传递数据，并在目标组件中使用这些参数。 这使我们的应用程序更加动态和交互性，使用户能够更好地了解和使用我们的系统。