react-router-dom - 程序员必备的路由管理工具

react-router-dom 是一个基于 React 的路由管理工具，在 React 应用中，它可以帮助我们管理路由组件的展示、切换和传递参数等操作，让我们的应用变得更加灵活、可扩展和易维护。

安装和使用

react-router-dom 可以通过 npm 或 yarn 安装，如下所示：

npm install react-router-dom

或者

yarn add react-router-dom

然后在你的 React 应用中，可以通过如下方式来引入 react-router-dom：

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

其中：

• BrowserRouter 是 react-router-dom 提供的一种路由方式，实现了浏览器历史记录的管理和 URL 解析等功能，和 hash 路由相比，更加符合前端开发的直觉。
• Route 是 react-router-dom 中最核心的路由组件，用于匹配指定的路由路径，并渲染对应的组件。
• Link 则是 react-router-dom 中提供的一个路由导航组件，用于在应用中跳转到指定的路由路径。

在使用时，我们可以根据需要来编写对应的路由配置，例如：

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

function Home() {
  return <h1>Welcome to the Home page!</h1>;
}

function About() {
  return <h1>Learn more About us here.</h1>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

上面的代码中，我们定义了两个组件 Home 和 About，分别对应 / 和 /about 两个路由路径。在 App 组件中，我们使用 Router 组件包裹了整个应用，然后在导航栏中使用 Link 组件来实现路由的跳转。最后，通过 Route 组件来匹配路径并渲染对应的组件。

路由参数

在 React 应用中，我们有时需要传递参数给路由组件，例如标识当前用户、指定待编辑的文章等。这时，我们可以通过在路由路径中添加占位符的方式来实现参数传递，例如：

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

function User(props) {
  const { id } = props.match.params;
  return <h1>Welcome to user {id}'s page!</h1>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/users/1">User 1</Link>
          </li>
          <li>
            <Link to="/users/2">User 2</Link>
          </li>
          <li>
            <Link to="/users/3">User 3</Link>
          </li>
        </ul>
      </nav>

      <Route path="/users/:id" component={User} />
    </Router>
  );
}

上面的代码中，我们在路由路径中使用了 :id 占位符来标识路由参数。在 User 组件中，我们通过 props.match.params 来获取当前路由路径中的参数，并展示对应的用户页面。

路由嵌套

在 React 应用中，我们有时需要实现路由嵌套的场景，例如在应用中实现多层级的页面导航。这时，我们可以通过在路由配置中嵌套 Route 组件来实现路由嵌套，例如：

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

function Home() {
  return <h1>Welcome to the Home page!</h1>;
}

function Products() {
  return (
    <div>
      <h1>Our Products</h1>
      <ul>
        <li>
          <Link to="/products/1">Product 1</Link>
        </li>
        <li>
          <Link to="/products/2">Product 2</Link>
        </li>
        <li>
          <Link to="/products/3">Product 3</Link>
        </li>
      </ul>

      <Route path="/products/:id" component={Product} />
    </div>
  );
}

function Product(props) {
  const { id } = props.match.params;
  return <h2>Welcome to Product {id}'s page!</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/products">Products</Link>
          </li>
        </ul>
      </nav>

      <Route path="/" exact component={Home} />
      <Route path="/products" component={Products} />
    </Router>
  );
}

上面的代码中，我们实现了一个简单的产品展示应用，其中 Products 组件包含了一个子路由 /products/:id，用于展示对应的产品详情页面。在 App 组件中，我们通过嵌套路由的方式实现了这种路由嵌套的场景。

路由守卫

在 React 应用中，我们有时需要对访问某些路由路径的用户进行权限控制或者登录验证等处理。这时，我们可以通过编写路由守卫来实现相关的处理，例如：

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

function Home() {
  return <h1>Welcome to the Home page!</h1>;
}

function Dashboard(props) {
  const { user } = props;
  if (!user) {
    return <Redirect to="/login" />;
  }
  return <h1>Welcome to your Dashboard, {user}!</h1>;
}

function Login(props) {
  const { setUser } = props;
  const handleSubmit = (event) => {
    event.preventDefault();
    const user = event.target.elements.user.value;
    setUser(user);
  };
  return (
    <div>
      <h1>Login</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" name="user" />
        <button type="submit">Log in</button>
      </form>
    </div>
  );
}

function App() {
  const [user, setUser] = useState(null);
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>
      </nav>

      <Route path="/" exact component={Home} />
      <Route path="/login" render={() => <Login setUser={setUser} />} />
      <Route path="/dashboard" render={() => <Dashboard user={user} />} />
    </Router>
  );
}

上面的代码中，我们实现了一个简单的登录和用户控制应用，其中 Dashboard 组件是需要登录才能访问的路由路径，如果用户未登录，我们会通过 Redirect 组件将其重定向到登录页面。在 Login 组件中，我们通过 setUser 函数将用户输入的用户名保存到状态中。在 App 组件中，我们通过 render 属性来编写路由守卫，实现了对访问路由路径的权限控制等处理。

小结

react-router-dom 是一个非常实用的路由管理工具，它可以帮助我们实现 React 应用中的路由控制、参数传递、路由嵌套、权限控制等多种功能。通过合理使用路由管理工具，我们可以提升应用的灵活性、可扩展性和易维护性，为用户提供更好的体验和服务。