在 npm 中安装 React Router DOM

React Router 是一个强大的工具，它可以帮助我们在 React 应用程序中管理多个视图和 URL。在本文中，我们将探讨如何使用 React Router DOM 来构建一个基本的路由系统。

安装 React Router DOM

在你的 React 项目中使用 React Router DOM 的第一步是安装它。你可以使用 npm 或者 yarn 来安装：

npm install react-router-dom #使用npm安装
或
yarn add react-router-dom #使用yarn安装

配置路由

安装 React Router DOM 后，我们需要配置路由。以下是一个基本的路由示例：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route>
          <NotFound />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

在上面的代码中，我们首先导入 Router、Route 和 Switch 组件。然后，我们定义三个路由，每一个路由都匹配一个 URL。当 URL 与路由匹配时，React 将渲染对应的组件。

动态路由参数

有时，我们需要动态地使用路由参数。例如，我们可能需要从一个 ID 启动一个默认的视图。以下示例演示如何使用动态路由参数：

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

import Home from './components/Home';
import UserProfile from './components/UserProfile';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/user/:id">
          <UserProfile />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

在上面的代码中，我们定义了一个带有 /:id 后缀的路由路径。在浏览器中访问 /user/1234，React 将渲染 UserProfile 组件并且可以从 React Router 中获取到 id 参数。

手动路由导航

React Router DOM 还提供了一个 Link 组件，它帮助我们在应用程序中导航。以下示例演示如何使用 Link 组件：

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

import Home from './components/Home';
import UserProfile from './components/UserProfile';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">首页</Link>
            </li>
            <li>
              <Link to="/user/1234">用户 1234</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/user/:id">
            <UserProfile />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

在上面的代码中，我们将 Link 组件用作京东导航条上的链接，以便用户可以通过它们导航到不同的视图。

总结

React Router DOM 是一个强大的工具，它可以帮助我们在 React 应用程序中管理路由。在本文中，我们了解了如何使用 React Router DOM 来构建基本的路由系统、如何使用动态路由参数和如何手动导航。让我们进行实践，将 React Router DOM 带入我们的项目中，以放大应用程序的潜力。