React路由常用组件是什么

在现代前端开发中，单页应用（SPA）已经成为主流。React作为最流行的前端框架之一，提供了强大的路由功能，使得开发者能够轻松地管理应用中的页面导航。React路由的核心是通过react-router-dom库实现的，它提供了一系列常用的组件来帮助我们构建复杂的路由系统。本文将详细介绍React路由中常用的组件及其用法。

1. BrowserRouter 和 HashRouter

BrowserRouter 和 HashRouter 是React路由中最顶层的组件，它们用于包裹整个应用，并提供路由功能。

1.1 BrowserRouter

BrowserRouter 使用HTML5的history API（pushState、replaceState和popstate事件）来保持UI与URL的同步。它是最常用的路由组件，适用于大多数现代浏览器。

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

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

1.2 HashRouter

HashRouter 使用URL的哈希部分（即#后面的部分）来保持UI与URL的同步。它适用于不支持HTML5 history API的旧版浏览器。

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

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

2. Route

Route 是React路由中最核心的组件之一，它用于定义URL路径与组件之间的映射关系。

2.1 基本用法

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

当URL匹配/about时，About组件将被渲染。

2.2 exact 属性

exact 属性用于确保路径完全匹配时才渲染组件。

<Route path="/" exact component={Home} />

如果没有exact属性，/about也会匹配/，导致Home组件被渲染。

2.3 render 和 children 属性

除了component属性，Route还支持render和children属性。

• render：用于在路径匹配时渲染一个函数返回的组件。

<Route path="/user" render={() => <User name="John" />} />

• children：无论路径是否匹配，都会渲染子组件。

<Route path="/user" children={() => <User name="John" />} />

3. Switch

Switch 组件用于包裹多个Route，它只会渲染第一个匹配的Route。如果没有Switch，所有匹配的Route都会被渲染。

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

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

在上面的例子中，如果URL为/about，只有About组件会被渲染，其他Route将被忽略。

4. Link 和 NavLink

Link 和 NavLink 是用于导航的组件，它们允许用户在应用中切换页面而不刷新整个页面。

4.1 Link

Link 组件用于创建一个导航链接。

import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

4.2 NavLink

NavLink 是Link的增强版，它允许在链接激活时添加样式或类名。

import { NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <NavLink to="/" exact activeClassName="active">Home</NavLink>
      <NavLink to="/about" activeClassName="active">About</NavLink>
      <NavLink to="/contact" activeClassName="active">Contact</NavLink>
    </nav>
  );
}

在上面的例子中，当链接激活时，active类名将被添加到对应的NavLink上。

5. Redirect

Redirect 组件用于重定向到另一个路径。

import { Redirect, Route } from 'react-router-dom';

function App() {
  return (
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/old-about" render={() => <Redirect to="/about" />} />
      <Route path="/about" component={About} />
    </Switch>
  );
}

在上面的例子中，当用户访问/old-about时，将被重定向到/about。

6. useHistory、useLocation 和 useParams

React Router还提供了一些Hooks，用于在函数组件中访问路由信息。

6.1 useHistory

useHistory Hook允许你访问history对象，从而进行编程式导航。

import { useHistory } from 'react-router-dom';

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push('/home');
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

6.2 useLocation

useLocation Hook返回当前的location对象，包含当前URL的信息。

import { useLocation } from 'react-router-dom';

function CurrentPath() {
  let location = useLocation();

  return <div>Current path: {location.pathname}</div>;
}

6.3 useParams

useParams Hook用于访问URL中的参数。

import { useParams } from 'react-router-dom';

function User() {
  let { userId } = useParams();

  return <div>User ID: {userId}</div>;
}

7. 嵌套路由

React Router支持嵌套路由，允许你在一个组件中定义子路由。

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

function App() {
  return (
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/users" component={Users} />
    </Switch>
  );
}

function Users() {
  return (
    <div>
      <h2>Users</h2>
      <Switch>
        <Route path="/users/:userId" component={UserDetail} />
        <Route path="/users" exact component={UserList} />
      </Switch>
    </div>
  );
}

在上面的例子中，Users组件中定义了子路由，/users显示用户列表，/users/:userId显示用户详情。

8. 总结

React Router提供了丰富的组件和Hooks，使得在React应用中实现路由功能变得非常简单。通过BrowserRouter、Route、Switch、Link、NavLink、Redirect等组件，我们可以轻松地构建复杂的路由系统。同时，useHistory、useLocation和useParams等Hooks为函数组件提供了强大的路由功能支持。掌握这些常用组件的用法，将有助于你更好地构建React单页应用。