React 项目中如何使用 react-router 实现路由跳转？

在一个现代化的 web 应用中，路由是一个非常重要的概念，因为它可以允许用户在一个应用中快速地访问不同的页面。React 是一个非常流行的前端库，它可以让你构建单页面应用（SPA），并且它也内置了一个 React Router 库，可以帮助你快速地实现路由跳转。本文将介绍如何在 React 项目中使用 react-router 实现路由跳转。

安装 react-router

首先，我们需要在项目中安装 react-router 库，通过 npm 或者 yarn 安装都可以，安装命令如下：

npm install react-router-dom

或者

yarn add react-router-dom

配置路由

接下来，我们需要在我们的应用中配置路由。我们可以创建一个新的文件，命名为 Routes.js，并且在该文件中定义我们的路由。

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

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

export default Routes;

我们在 Routes.js 文件中使用 BrowserRouter 组件来包裹我们的 Route 组件，这将帮助我们处理路由的历史记录。Switch 组件用于匹配路由路径，然后返回与该路径匹配的第一个组件。Route 组件定义了一个路由，可以通过 exact 属性配置是否需要精确匹配。

使用路由

我们现在可以在我们的应用中使用路由了。我们可以在 App.js 文件中，将我们的 Routes 组件导入到应用中，然后将其呈现在页面上。如下所示：

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

const App = () => {
  return (
    <div className="app">
      <Routes />
    </div>
  );
};

export default App;

通过以上代码，我们已经成功地在我们的应用程序中配置了路由。现在我们可以使用 Link 组件来创建一个链接，它可以让用户在应用程序中跳转不同的路由。

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

const NavBar = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
};

export default NavBar;

我们在导航栏中创建了三个链接，每个链接都使用了 Link 组件来定义一个路由。 to 属性用于指定链接要跳转的路径。

示例代码

最后，我们来看一个完整的示例代码，包含了路由配置和路由跳转。

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

const Routes = () => {
  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 exact path="/about" component={About} />
        <Route exact path="/contact" component={Contact} />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
};

export default Routes;

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

const NavBar = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
};

export default NavBar;

例如，我们在 About.js 中创建一个组件，它将呈现以下内容：

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

const About = () => {
  return (
    <div>
      <h1>About Us</h1>
      <p>We are a team of developers.</p>
    </div>
  );
};

export default About;

通过以上内容，我们可以在 React 项目中使用 react-router 实现路由跳转。希望你能从本文中学到如何使用 react-router，并且可以运用到自己的 React 项目中。

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