react路由哈希路由

React路由有两种主要的路由方式：哈希路由和浏览器路由。

哈希路由是指在URL中使用#符号，例如：`http://example.com/#/home`。这种方式的好处是可以避免页面刷新，因为每次URL的改变只会触发hashchange事件，而不会重新发送请求。哈希路由也比较容易实现，不需要服务器端的支持，只需要在前端通过监听hashchange事件来改变页面的内容。

浏览器路由是指在URL中直接使用路径，例如：`http://example.com/home`。这种方式需要服务器端的支持，因为每次URL的改变都会触发浏览器向服务器发送请求。浏览器路由也更加符合传统的URL格式，看起来更加美观。

React路由提供了两种不同的路由方式：BrowserRouter和HashRouter。BrowserRouter使用浏览器路由，而HashRouter使用哈希路由。根据项目的实际情况选择合适的路由方式即可。

相关问题

react怎么实现二级路由，需要哈希路由，路由懒加载

在 React 中实现二级路由需要使用 React Router 库，并且需要使用哈希路由。哈希路由使用 URL 中的 # 符号来实现路由跳转，这样可以避免刷新页面时的数据丢失。以下是实现二级路由的步骤：

1. 安装 React Router 库：在终端中使用 npm install react-router-dom 命令安装 React Router 库。

2. 引入 React Router 库：在需要使用路由的组件中引入 React Router 库。

3. 创建路由组件：在路由组件中使用 Route 组件设置二级路由的路径和对应的组件。

4. 设置路由跳转：在需要跳转到二级路由的组件中，使用 Link 组件设置跳转路径。

5. 使用路由懒加载：在设置路由组件时，使用 React.lazy 和 Suspense 组件实现路由懒加载，可以提高页面加载速度。

以下是示例代码：

import React, { lazy, Suspense } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));

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

        <Suspense fallback={<div>Loading...</div>}>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Suspense>
      </div>
    </Router>
  );
}

export default App;

在上面的代码中，Home 和 About 组件是二级路由的组件，使用 Route 组件设置了二级路由的路径和对应的组件。在需要跳转到二级路由的组件中，使用 Link 组件设置跳转路径。使用 React.lazy 和 Suspense 组件实现了路由懒加载。

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>` 组件，用于创建可点击的链接，自动匹配当前路由。