开关不是从 react-router-dom 导出的

在使用 React 开发项目时，通常需要使用路由来实现页面的跳转和管理。而 React 提供了一个非常受欢迎的路由库——react-router-dom ，它提供了很多实用的组件和工具，比如 <Link> 、 <Route> 、 <Switch> 等等。然而，在实际开发中，我们可能会遇到这样一个问题：在某个组件中需要用到一个开关组件，但是我们并不想导入一个新的库来实现这个功能，那该怎么办呢？

可选方案

在这里我们提供两个可选的方案，分别是使用 React 自带的 checkbox 元素和自己手写一个开关组件。

使用 checkbox

checkbox 是 HTML 标准中提供的一种复选框元素，可以用来表示开关的状态。我们可以通过 CSS 来改变他的样式。

import React, { useState } from 'react';

function SwitchCheckbox() {
  const [checked, setChecked] = useState(false);

  function handleChange(event) {
    setChecked(event.target.checked);
  }

  return (
    <label>
      <input type="checkbox" checked={checked} onChange={handleChange} />
      <span>{checked ? 'ON' : 'OFF'}</span>
    </label>
  );
}

在这个示例代码中，我们创建了一个 SwitchCheckbox 组件，并通过 useState 来维护当前 checkbox 的状态。在 handleChange 函数中，我们通过改变 checked 状态来实现开关的功能。<label> 元素是为了让 checkbox 能够与文字关联起来，提高可用性。

手写开关组件

如果你不想使用 checkbox，也可以手写一个开关组件。下面是一个简单的实现示例：

function Switch() {
  const [on, setOn] = useState(false);

  function handleClick() {
    setOn(!on);
  }

  return (
    <div
      style={{
        width: '40px',
        height: '20px',
        borderRadius: '10px',
        backgroundColor: on ? 'green' : 'gray',
        position: 'relative',
        cursor: 'pointer',
      }}
      onClick={handleClick}
    >
      <div
        style={{
          width: '16px',
          height: '16px',
          borderRadius: '8px',
          backgroundColor: 'white',
          position: 'absolute',
          top: '2px',
          left: on ? '22px' : '2px',
          transition: 'left .2s ease-out',
        }}
      />
    </div>
  );
}

在这个示例代码中，我们创建了一个 Switch 组件，并通过 useState 来维护当前开关的状态。在 handleClick 函数中，我们通过改变 on 状态来实现开关的功能。通过改变 div 的样式实现开关外观的改变。

总结

路由库非常实用，但并不是每个项目都需要使用。在开发中，我们可以通过上面的示例来实现一些常见的功能，而不必引入新的库，这样也能减少项目体积，提高代码的可读性和维护性。