返回

React Router DOM 实战之 hash 路由详解

前端

哈希路由是前端路由的一种，它利用 URL 中的哈希（#）符号来模拟 SPA 单页应用的路由。它简单易用，易于部署，并且在所有现代浏览器中都得到支持。

React Router DOM 实战

为了使用 React Router DOM 实现 hash 路由，我们需要先安装它。可以使用以下命令进行安装：

npm install react-router-dom

安装完成后，就可以在项目中使用它了。首先，我们需要创建一个新的 React 项目。可以使用以下命令创建：

npx create-react-app my-app

创建项目完成后，就可以在项目中使用 React Router DOM 了。首先，我们需要在 src 目录下创建一个新的文件 App.js。在 App.js 文件中，我们需要导入 React Router DOM 的组件。可以使用以下代码进行导入：

import { BrowserRouter, Switch, Route, Link } from "react-router-dom";

导入组件后，就可以在 render 方法中使用它们了。可以使用以下代码来创建 hash 路由：

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

这段代码创建了一个 hash 路由。它包含了三个路由：/、/about 和 /contact。当用户访问 / 路径时，将渲染 Home 组件。当用户访问 /about 路径时，将渲染 About 组件。当用户访问 /contact 路径时，将渲染 Contact 组件。

为了使路由正常工作，我们需要在 index.js 文件中进行一些配置。可以使用以下代码进行配置：

import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

这段代码将 App 组件渲染到 root 元素中。

结论

哈希路由是一种简单易用、易于部署的路由方式。它非常适合于小型和中型的 SPA 单页应用。