React-Router v5.1 中引入的 Hooks

每当我最喜欢的库/框架/语言发布新版本时，我都会感到很兴奋。昨天下午 6 点左右，我在浏览 Twitter 时看到 react-router 发布了新版本，于是我去查看了一下，react-router 团队添加了一些非常棒的新 API 和功能。react
-router 团队在其 5.1 版本中发布了一些钩子 API，包括、和useParams钩子useLocation，为正在进行的 React 钩子热潮增添了新的内容。除了添加到 v5.1 的钩子之外，现在还支持，并且他们重新引入了在和的 prop中传递函数的功能。useHistoryuseRouteMatchforwardRef<Link>to<Link><NavLink>

我将介绍这些钩子如何工作以及它们如何改变我们编写路线的方式。

useParams

这个钩子允许我们访问特定路由的参数。这些参数的值会在 URL 中动态设置。在之前的 React-router 版本中，我们访问这些参数的方式通常是通过传递给组件的 match props。

// <= V5.0

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

const Portfolio = props => {
    const { match } = props;

    let {id} = match.params;
    return (
        <div>
            Portfolio component
            <p>Url params: {id}</p>
        </div>
    );
};

function App() {
    return (
        <div className="App">
            <Router>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/contact">Contact</Link>
                    </li>
                    <li>
                        <Link to="/portfolio/6">Portfolio</Link>
                    </li>
                </ul>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/portfolio/:id" component={Portfolio} />
                    <Route path="/contact" component={Contact} />
                </Switch>
            </Router>
        </div>
    );
}

以上是我们在旧版本的 React-router 中访问 URL 参数的方式。但是随着 useParams hook 的引入，所有用户都可以从 hook 中访问这些参数。

// > V5.1
import { useParams} from "react-router";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const Portfolio = () => {
    let { id } = useParams();
    return (
        <div>
            Portfolio component
            <p>Topic: {id}</p>
        </div>
    );
};

使用位置

这是 v5.1 中发布的另一个 hook。如果你经常使用 React-router，我假设你之前已经使用过 location 对象来获取pathname属性或状态属性。我通常通过 React-router 传递状态，Link所以我想我会重构我的组件以使用 useLocation hook，这可能是我生产环境中的第一个 React hook 👀（我知道我来晚了）。

注意：通过 react-router 传递状态<Link>并不是一个新功能，自从我开始使用 React 以来它就一直存在。

// > V5.1
import { useLocation} from "react-router";

const Settings = () => {
    let location = useLocation();
    console.log(location);
    return <div>settings component</div>;
};

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

                    <li>
                        <Link
                            to={{
                                pathname: "/settings",
                                state: {
                                    fromNavBar: true
                                }
                            }}
                        >
                            Settings
                        </Link>
                    </li>
                </ul>
                <Switch>
                    <Route exact path="/" component={Home} />
                                       //
                    <Route path="/settings" component={Settings} />
                </Switch>
            </Router>
        </div>
    );
}

// console
// {
//   "pathname": "/settings",
//   "state": {
//     "fromNavBar": true
//   },
//   "search": "",
//   "hash": "",
//   "key": "x8vmq3"
// }

该钩子返回包含、、和当前位置属性的位置useLocation对象。pathnamesearchhashkeystate

使用历史

它useHistory使我们能够访问history对象，从而帮助我们以编程方式导航或更改路线。

// > V5.1
import { useHistory } from "react-router-dom";

export const Profile = () => {
    let history = useHistory();
    return (
        <div>
            <button onClick={() => history.goBack()}>Back</button>
            <button onClick={() => history.push("/")}>Home</button>
            <section>
                <p>profile page</p>
            </section>
        </div>
    );
};

history 对象还将位置对象作为其属性之一返回，但建议不要使用它返回的位置，因为history 是可变的，因此请使用useLocation钩子。

useRouteMatch

这是此版本中添加的最后一个钩子，允许您在不渲染组件的情况下useRouteMatch访问该属性。它像路由一样匹配 URL，并且像一样接受、和选项。在 V5.1 之前，访问该对象的方式如下：match<Route>exactstrictpathsensitive<Route>match

路由组件作为 this.props.match
路由渲染为 ({ match }) => ()
将子项路由为 ({ match }) => ()
withRouter 作为 this.props.match
matchPath 作为返回值

// <= V5.0
function App() {
    return (
        <div className="App">
            <Router>
                <Route
                    path="'/Movies/:id/'"
                    strict
                    sensitive
                    render={({ match }) => {
                        return match && <Movies match={match} />;
                    }}
                />
            </Router>
        </div>
    );
}

// > V5.1
import { useRouteMatch } from "react-router";

function App() {
    let match = useRouteMatch({
        path: "/Movies/:id/",
        strict: true,
        sensitive: true
    });

    return (
        <div>
            {match && <Movies match={match} />}
        </div>
    );
}

useRouteMatch为我们提供了一种访问匹配对象的新方法，如果您有一个<Route>不在 a 内的，Switch那么使用是有意义的useRouteMatch。我的意思是它是 hooks szn!!!

结论

我非常喜欢 React-router API 中添加的这些钩子，它们使我们能够组合路由器状态，这为构建应用程序开辟了新的可能性。我非常期待未来版本中还会引入哪些新功能和 API，React-router 团队也希望在明年初发布第 6 版。

文章来源：https://dev.to/finallynero/hooks-introduced-in-react-router-v5-1-7g8