React 中如何实现页面跳转-JavaScript中文网-JavaScript教程资源分享门户

React 是一个流行的 JavaScript 库，它可以帮助我们构建高效、可维护的用户界面。在 React 应用程序中，页面跳转是非常常见的任务。本文将介绍如何在 React 中实现页面跳转，并提供一些示例代码。

React Router

React Router 是一个流行的 React 路由库，它可以帮助我们管理应用程序的 URL。使用 React Router，我们可以将 URL 映射到组件，并且可以在组件之间进行切换。

React Router 可以通过 npm 安装：

npm install react-router-dom

React Router 提供了几个组件来实现页面跳转：

BrowserRouter：使用 HTML5 history API（pushState，replaceState 和 popstate 事件）来保持 UI 和 URL 的同步。
HashRouter：使用 URL 的 hash 部分（例如，example.com/#/page1）来保持 UI 和 URL 的同步。
Link：用于在应用程序中导航到新 URL 的组件。
Route：用于在 URL 匹配时呈现的组件。
Switch：用于呈现第一个与当前 URL 匹配的组件。

BrowserRouter

BrowserRouter 使用 HTML5 history API 来保持 UI 和 URL 的同步。它需要放置在应用程序的最外层，以便正确处理所有 URL。

// www.javascriptcn.com code example
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

在上面的代码中，我们使用 BrowserRouter 包装了 Switch 组件。Switch 组件将呈现第一个与当前 URL 匹配的 Route 组件。我们使用 exact 属性来确保只有当 URL 完全匹配时才呈现 Home 组件。

Link

Link 组件用于在应用程序中导航到新 URL。它可以作为常规的 <a> 标签使用，但是它会阻止默认行为并使用 HTML5 history API 来更新 URL。

// www.javascriptcn.com code example
import React from 'react';
import { Link } from 'react-router-dom';

function Home() {
  return (
    <div>
      <h1>Welcome to my website!</h1>
      <p>Check out my <Link to="/about">about page</Link> or <Link to="/contact">contact me</Link>.</p>
    </div>
  );
}

export default Home;

在上面的代码中，我们使用 Link 组件来链接到其他页面。当用户单击链接时，Link 组件将使用 HTML5 history API 来更新 URL，并呈现与新 URL 匹配的组件。

Route

Route 组件用于在 URL 匹配时呈现组件。它可以使用 component 属性来指定要呈现的组件。

// www.javascriptcn.com code example
import React from 'react';

function About() {
  return (
    <div>
      <h1>About me</h1>
      <p>I'm a web developer from New York City.</p>
    </div>
  );
}

export default About;

在上面的代码中，我们定义了一个 About 组件，它将在 /about URL 匹配时呈现。

示例代码

以下是一个完整的示例代码，演示如何在 React 中实现页面跳转：

// www.javascriptcn.com code example
import React from 'react';
import { BrowserRouter, Link, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

在上面的代码中，我们定义了一个 App 组件，它使用 BrowserRouter 来管理 URL。我们还定义了一个导航栏，其中包含链接到主页、关于页面和联系页面的链接。我们使用 Switch 组件来呈现与当前 URL 匹配的组件。我们使用 exact 属性来确保只有当 URL 完全匹配时才呈现 Home 组件。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d51305a941bf7134964b84

React 中如何实现页面跳转

React Router

BrowserRouter

Link

Route

示例代码

接着读