React 中如何使用 React-Router 进行路由跳转

React 是一种流行的前端框架，它可以帮助我们构建复杂的单页应用程序。React-Router 是一个用于 React 应用程序的路由库，它可以帮助我们管理应用程序中的路由。本文将介绍如何在 React 中使用 React-Router 进行路由跳转。

安装 React-Router

首先，我们需要安装 React-Router。可以使用 npm 或 yarn 进行安装：

npm install react-router-dom

或者

yarn add react-router-dom

创建路由

在 React 中，我们可以使用 <BrowserRouter> 组件来创建路由。该组件包含了我们应用程序的所有路由。下面是一个简单的示例：

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

ReactDOM.render(
  <BrowserRouter>
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  </BrowserRouter>,
  document.getElementById('root')
);

在上面的示例中，我们导入了 BrowserRouter 和 Route 组件。我们还导入了两个组件 Home 和 About，它们将在不同的路由下被渲染。

我们将 BrowserRouter 组件作为根组件，并在其中定义了两个路由。exact 属性告诉 React-Router 只有在 URL 完全匹配时才渲染该组件。path 属性指定了 URL 路径，component 属性指定了该路径下要渲染的组件。

路由跳转

在 React-Router 中，我们可以使用 <Link> 组件来进行路由跳转。该组件会渲染一个超链接，当用户单击该链接时，React-Router 会帮助我们进行路由跳转。下面是一个简单的示例：

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

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>
  );
}

export default Navbar;

在上面的示例中，我们导入了 Link 组件，并在组件中使用了 to 属性来指定要跳转的路由。当用户单击该链接时，React-Router 会帮助我们进行路由跳转。

路由参数

在有些情况下，我们需要在路由中传递参数。例如，我们可能需要在用户单击一个链接时，将一些数据传递给另一个组件。在 React-Router 中，我们可以使用路由参数来实现这一点。下面是一个简单的示例：

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

function Home() {
  return (
    <div>
      <h1>Home</h1>
      <ul>
        <li>
          <Link to="/user/1">User 1</Link>
        </li>
        <li>
          <Link to="/user/2">User 2</Link>
        </li>
      </ul>
    </div>
  );
}

export default Home;

在上面的示例中，我们在链接的 to 属性中添加了一个路由参数。在我们的例子中，我们将用户 ID 作为路由参数传递给 User 组件。我们可以使用 props.match.params 来获取路由参数。下面是一个简单的示例：

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

function User(props) {
  return (
    <div>
      <h1>User {props.match.params.id}</h1>
    </div>
  );
}

export default User;

在上面的示例中，我们使用 props.match.params.id 来获取路由参数，并将其显示在页面上。

小结

在本文中，我们介绍了如何在 React 中使用 React-Router 进行路由跳转。我们学习了如何创建路由、如何使用 <Link> 组件进行路由跳转，以及如何使用路由参数传递数据。希望这篇文章能够帮助你更好地理解 React-Router，并在你的项目中使用它来管理路由。

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