使用 React 和 History API

2020-09-17 08:00:00 · 飞浪

介绍 React中的路由大量使用了HTML5HistoryAPI。在本指南中，您将了解HistoryAPI，并构建一个简单的应用程序，以便在使用React路由器包时深入了解它的工作原理。

介绍

React 中的路由大量使用了 HTML5 History API。在本指南中，您将了解 History API，并构建一个简单的应用程序，以便在使用 React 路由器包时深入了解它的工作原理。

了解 History API

目前，大多数浏览器在 DOM 的 Window 对象上公开一个 history 对象，该对象用于访问浏览器的会话历史记录，并使用 history.back ()和history.forward()方法（其功能也类似于浏览器中的后退和前进按钮）以及许多其他方法（如go()和pushState() ）向前和向后导航。您可以通过Mozilla 开发者网络 (MDN) 文档阅读有关 HTML5 History API 的更多信息。

React Router 使用历史记录包，它基于浏览器历史记录 API 构建，以提供我们可以在 React 应用程序中轻松使用的界面。

历史对象具有以下属性和方法：

长度 - （数字）历史堆栈中的条目数
action - (字符串) 当前操作 ( PUSH、 REPLACE或 POP )
location - （对象）当前位置。可能具有以下属性：
- pathname - (字符串) URL 的路径
- 搜索 - (字符串) URL 查询字符串
- hash - (字符串) URL 哈希片段
- state - （对象）特定位置的状态，当此位置被推送到堆栈时提供给 push(path, state) 。仅在浏览器和内存历史记录中可用。
push(path，[state]) -（函数）将新条目推送到历史堆栈
replace(path，[state]) -（函数）替换历史堆栈上的当前条目
go(n) - (函数) 将历史堆栈中的指针移动 n 个 条目
goBack() - (函数) 相当于 go(-1)
goForward() - (函数) 相当于 go(1)
block(prompt) -（功能）阻止导航

来自React Router 文档

设置开发环境

设置您的环境以构建一个简单的应用程序，该应用程序充当虚拟浏览器，并具有一个小型分析解决方案来显示用户来自哪些页面。您可以在本地计算机上使用create-react-app ，也可以在浏览器中输入react.new以通过codesandbox.io获得完全配置的 react 环境。

接下来，使用以下命令在终端中添加react-router作为依赖项：

      yarn add react-router-dom

设置呈现简单基于文本的组件的虚拟页面和路由。

      import React from "react";

function HomePage() {
    return <p>Welcome Home</p>;
}
function About() {
    return <p>About Page</p>;
}
function Contact() {
    return <p>Contact Page</p>;
}
function Foo() {
    return <p>Contact Bar</p>;
}

export {HomePage, About, Contact, Foo};
    

      # Routes
import React from "react";
import { Route, Switch , BrowserRouter as Router} from "react-router-dom";
import { HomePage, About, Contact, Foo } from "./Pages/Homepage";
import "./global.css";

const Routes = () => {
    return (
				<Router>
            <Switch>
                <Route exact path="/" component={HomePage} />
				</Router>
        </div>
    );
};

export default Routes;
    

useHistory 钩子

React Router 有一个useHistory钩子，它提供了一个历史记录接口，我们可以轻松地使用它进行路由。向这些页面添加按钮（如下所示），以使用 History API 添加路由。

      import React from "react";
import { useHistory } from "react-router-dom";

function HomePage() {
    const history = useHistory();

    return (
        <>
            <button
                onClick={() => history.push("/about", { from: "HomePage" })}
            >
                About
            </button>
            <button
                onClick={() => history.push("/contact", { from: "HomePage" })}
            >
                Contact
            </button>
            <p>Welcome Home</p>
        </>
    );
}
function About({ location }) {
    const history = useHistory();
    return (
        <>
            <p>About Page </p>
            <button
                onClick={() => {
                    history.goBack();
                }}
            >
                Go back
            </button>
            <p> You were redirected from {location.state.from}</p>
        </>
    );
}
function Contact({ location }) {
    const history = useHistory();
    return (
        <>
            <p>Contact Page</p>
            <button
                onClick={() => {
                    history.goBack();
                }}
            >
                Go back
            </button>
            <p>You were redirected from {location.state.from}</p>
        </>
    );
}
    

上面的代码片段使用goBack()方法模拟浏览器中的后退按钮，并使用push()方法移动到新路由。push()方法也接受一个 state 对象以及from作为属性。

      import React from "react";

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

function HomePage() {
    const history = useHistory();

    return (
        <>
            <button
                onClick={() => history.push("/about", { from: "HomePage" })}
            >
                About
            </button>

            <button
                onClick={() => history.push("/contact", { from: "HomePage" })}
            >
                Contact
            </button>

            <p>Welcome Home</p>
        </>
    );
}

function About({ location }) {
    const history = useHistory();

    console.log(history);

    return (
        <>
            <p>About Page </p>

            <button
                onClick={() => {
                    history.goBack();
                }}
            >
                Go back
            </button>

            <p> You were redirected from {location.state.from}</p>
        </>
    );
}

function Contact({ location }) {
    const history = useHistory();

    return (
        <>
            <p>Contact Page</p>

            <button
                onClick={() => {
                    history.goBack();
                }}
            >
                Go back
            </button>

            <p>You were redirected from {location.state.from}</p>
        </>
    );
}
    

结论

您已成功掌握了通过 React Router 使用 History API 的基础知识。您可以通过文档阅读有关 React Router 的更多信息。您也可以通过 Twitter 与我联系，我的账号是@DesmondNyamador。

了解更多

探索 Pluralsight 的这些 React 课程以继续学习：

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用 React 和 History API

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React from "react"; function HomePage() { return <p>Welcome Home</p>; } function About() { return <p>About Page</p>; } function Contact() { return <p>Contact Page</p>; } function Foo() { return <p>Contact Bar</p>; } export {HomePage, About, Contact, Foo};

# Routes import React from "react"; import { Route, Switch , BrowserRouter as Router} from "react-router-dom"; import { HomePage, About, Contact, Foo } from "./Pages/Homepage"; import "./global.css"; const Routes = () => { return ( <Router> <Switch> <Route exact path="/" component={HomePage} /> </Router> </div> ); }; export default Routes;

import React from "react"; import { useHistory } from "react-router-dom"; function HomePage() { const history = useHistory(); return ( <> <button onClick={() => history.push("/about", { from: "HomePage" })} > About </button> <button onClick={() => history.push("/contact", { from: "HomePage" })} > Contact </button> <p>Welcome Home</p> </> ); } function About({ location }) { const history = useHistory(); return ( <> <p>About Page </p> <button onClick={() => { history.goBack(); }} > Go back </button> <p> You were redirected from {location.state.from}</p> </> ); } function Contact({ location }) { const history = useHistory(); return ( <> <p>Contact Page</p> <button onClick={() => { history.goBack(); }} > Go back </button> <p>You were redirected from {location.state.from}</p> </> ); }

import React from "react"; import { useHistory } from "react-router-dom"; function HomePage() { const history = useHistory(); return ( <> <button onClick={() => history.push("/about", { from: "HomePage" })} > About </button> <button onClick={() => history.push("/contact", { from: "HomePage" })} > Contact </button> <p>Welcome Home</p> </> ); } function About({ location }) { const history = useHistory(); console.log(history); return ( <> <p>About Page </p> <button onClick={() => { history.goBack(); }} > Go back </button> <p> You were redirected from {location.state.from}</p> </> ); } function Contact({ location }) { const history = useHistory(); return ( <> <p>Contact Page</p> <button onClick={() => { history.goBack(); }} > Go back </button> <p>You were redirected from {location.state.from}</p> </> ); }