react 路由的几种写法

React Router 是 React 应用程序中用于处理客户端路由的流行库。它支持多种路由模式，主要有以下几种常见的写法：

1. **基本路由（BrowserRouter）**：这是最基础的路由，基于 HTML5 的 History API。`<Router>` 组件通常包含 `<Route>` 子组件，每个 `<Route>` 标记了一个特定的 URL。例如：

import { BrowserRouter as Router, Route } from 'react-router-dom';
function App() {
  return (
    <Router>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

2. **Hash Router**：当浏览器不支持 HTML5 History API 时，可以使用 Hash Router，通过 URL 中的哈希片段 (#) 来表示路由。写法类似：

import { HashRouter, Route } from 'react-router-dom';
function App() {
  return (
    <HashRouter>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </HashRouter>
  );
}

3. **Memory Router**：内存路由器只在单页应用内部有效，适用于无状态组件之间的导航。它并不实际改变 URL，而是维护组件树的状态。例如：

import { MemoryRouter } from 'react-router-dom';
function App() {
  return (
    <MemoryRouter>
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </MemoryRouter>
  );
}

4. **Link组件和NavLink组件**：除了 `<Route>`，还有专用的 `<Link>` 和 `<NavLink>` 组件，用于创建可点击的链接，自动匹配当前路由。