react-router-dom

React Router 是一个基于 React 的强大路由库，它帮助你在你的 React 应用中实现单页应用(SPA)。其中 react-router-dom 是专门为 Web 应用开发提供的解决方案。

安装

使用 npm 安装 react-router-dom：

npm install react-router-dom

使用

基本用法

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

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/about">关于</Link>
          </li>
          <li>
            <Link to="/contact">联系我们</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/">
          <h1>欢迎来到首页！</h1>
        </Route>
        <Route path="/about">
          <h1>关于我们</h1>
          <p>这是一段关于我们的介绍。</p>
        </Route>
        <Route path="/contact">
          <h1>联系我们</h1>
          <p>您可以通过以下方式联系我们：</p>
          <ul>
            <li>电话：010-12345678</li>
            <li>邮箱：contact@example.com</li>
          </ul>
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

在这个例子中，我们定义了一个简单的页面导航菜单，并使用 Link 组件来实现路由跳转。当点击导航链接时，Link 组件会自动更新页面的 URL，并且进入匹配的 Route 当中加载对应的组件。

嵌套路由

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

function Products() {
  const match = useRouteMatch();

  return (
    <div>
      <h2>产品列表</h2>
      <ul>
        <li>
          <Link to={`${match.url}/iphone`}>iPhone</Link>
        </li>
        <li>
          <Link to={`${match.url}/ipad`}>iPad</Link>
        </li>
        <li>
          <Link to={`${match.url}/mac`}>Mac</Link>
        </li>
      </ul>

      <Switch>
        <Route path={`${match.path}/iphone`}>
          <h3>iPhone</h3>
          <p>这里是 iPhone 的介绍。</p>
        </Route>
        <Route path={`${match.path}/ipad`}>
          <h3>iPad</h3>
          <p>这里是 iPad 的介绍。</p>
        </Route>
        <Route path={`${match.path}/mac`}>
          <h3>Mac</h3>
          <p>这里是 Mac 的介绍。</p>
        </Route>
      </Switch>
    </div>
  );
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/products">产品列表</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/">
          <h1>欢迎来到首页！</h1>
        </Route>
        <Route path="/products">
          <Products />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

在这个例子中，我们在产品列表页面中使用了嵌套路由。首先，我们使用 useRouteMatch Hook 来获取当前 URL 的匹配信息，然后在 Link 组件中通过 ${match.url} 构造出每一个子页面的 URL。

在 Route 中，我们使用 ${match.path} 来匹配到当前页面的 URL，并根据路由规则加载对应的组件。这样就能实现嵌套路由的效果了。

路由传参

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

function Product() {
  const { id } = useParams();

  return (
    <div>
      <h3>{id}</h3>
      <p>这里是 {id} 的介绍。</p>
    </div>
  );
}

function Products() {
  const products = ['iphone', 'ipad', 'mac'];

  return (
    <div>
      <h2>产品列表</h2>
      <ul>
        {products.map((item) => (
          <li key={item}>
            <Link to={`/products/${item}`}>{item}</Link>
          </li>
        ))}
      </ul>

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

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/products">产品列表</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/">
          <h1>欢迎来到首页！</h1>
        </Route>
        <Route path="/products">
          <Products />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

在这个例子中，我们在产品列表页面中点击链接时，通过 URL 传递了产品名称的参数。在 Product 组件中，我们使用 useParams Hook 来获取 URL 中传递的参数，并根据参数渲染对应的产品介绍。

重定向

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

function Login() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const login = () => {
    if (username === 'admin' && password === '123456') {
      setIsAuthenticated(true);
    } else {
      alert('用户名或密码错误');
    }
  };

  if (isAuthenticated) {
    return <Redirect to="/dashboard" />;
  }

  return (
    <div>
      <h2>登录</h2>
      <form>
        <div>
          <label htmlFor="username">用户名：</label>
          <input type="text" id="username" value={username} onChange={(e) => setUsername(e.target.value)} />
        </div>
        <div>
          <label htmlFor="password">密码：</label>
          <input type="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} />
        </div>
        <button type="button" onClick={login}>
          登录
        </button>
      </form>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>欢迎来到控制面板！</h2>
      <p>这里是您的个人信息。</p>
    </div>
  );
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/dashboard">控制面板</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/">
          <h1>欢迎来到首页！</h1>
        </Route>
        <Route path="/login">
          <Login />
        </Route>
        <Route path="/dashboard">
          <Dashboard />
        </Route>
        <Redirect to="/" />
      </Switch>
    </Router>
  );
}

export default App;

在这个例子中，我们定义了一个路由守卫组件 Login，并在其中使用 Redirect 组件来实现重定向。当用户成功登录后，isAuthenticated 状态变为 true，此时就会重定向到 /dashboard 页面。

我们还在路由配置中定义了一个默认的重定向规则 Redirect to="/" />，当用户访问不存在的路由时，就能跳转到首页。

总结

通过 react-router-dom，我们可以很方便地实现 Web 应用的路由功能，并且可以实现嵌套路由、路由传参、重定向等高级特性。如果你正在开发一个 React Web 应用，不要忘记引入它！