如何在 React.js 中安装 react-router-dom

简介

react-router-dom 是 React.js 的路由库，它提供了一些组件和函数，帮助我们在 React.js 中更加方便地实现路由功能。

它提供了以下几种路由方式：

• BrowserRouter
• HashRouter
• MemoryRouter
• NativeRouter
• StaticRouter

在这里，我们将使用 BrowserRouter 作为演示。

安装 react-router-dom

要在 React.js 中使用 react-router-dom，我们需要安装该库。

在终端中执行以下命令：

npm install react-router-dom

如果你使用的是 yarn，可以执行：

yarn add react-router-dom

在项目中使用 react-router-dom

安装 react-router-dom 后，我们就可以在项目中使用它了。

首先，我们需要在项目中导入该库的组件：

import {BrowserRouter, Route, Switch, Link} from 'react-router-dom';

这里，我们导入了 BrowserRouter，Route，Switch 和 Link 四个组件。

接下来，我们可以在项目中使用这些组件了。

使用 BrowserRouter

BrowserRouter 是 react-router-dom 中用于包含我们所有路由规则的组件，我们需要将它作为我们应用的最外层组件。

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

使用 Route

Route 组件用于定义路由规则，我们可以使用它来配置哪些组件将被渲染到哪个路径下。

<Route path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />

这里，我们定义了三个 Route 组件。

第一个组件表示，如果访问的是根路径（/），则渲染 Home 组件。

第二个组件表示，如果访问的是 /about，则渲染 About 组件。

第三个组件表示，如果访问的是 /contact，则渲染 Contact 组件。

使用 Switch

Switch 组件用于包含一组 Route 组件，并渲染匹配到的第一个路由规则，如果没有匹配上任何路由，则渲染 404 组件。

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
  <Route component={NotFound} />
</Switch>

这里，我们使用了 exact 属性，在匹配路径时精确匹配。

如果你不加 exact，则 / 路径将会匹配所有其它路径。

这里，我们还定义了一个 NotFound 组件，它将用于渲染 404 页面。

使用 Link

Link 组件用于生成链接，我们可以在项目中使用它代替 <a> 标签，这样路由就不会发生刷新了。

<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/contact">Contact</Link>

这里，我们使用 to 属性指定链接的路径。当用户点击链接时，react-router-dom 会根据路径切换组件，而不会发生页面刷新。

完整代码

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Switch, Link} from 'react-router-dom';

import Home from './views/Home';
import About from './views/About';
import Contact from './views/Contact';
import NotFound from './views/NotFound';

ReactDOM.render(
  <BrowserRouter>
    <div className="app">
      <nav className="nav">
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route component={NotFound} />
      </Switch>
    </div>
  </BrowserRouter>,
  document.getElementById('root')
);

总结

在 React.js 中使用 react-router-dom 来实现路由功能非常简单。上面是最基础的教程，如果你想深入了解该库的更多用法，请查看官方文档。