React 路由

一、路由模式

我们一直在使用的路由方式是BrowserRouter，也就是浏览器的路由方式，其实React还有几种路由方式：

1、BrowserRouter：浏览器的路由方式，也就是在开发中最常使用的路由方式

2、HashRouter：在路径前加入#号成为一个哈希值，Hash模式的好处是，再也不会因为我们刷新而找不到我们的对应路径

3、MemoryRouter：不存储history，所有路由过程保存在内存里，不能进行前进后退，因为地址栏没有发生任何变化

4、NativeRouter：经常配合ReactNative使用，多用于移动端

5、StaticRouter：设置静态路由，需要和后台服务器配合设置，比如设置服务端渲染时使用

<Router>
所有路由组件的最底层接口, 通常，将用以下某种高阶路由：

<BrowserRouter>
<HashRouter>
<MemoryRouter>
<NativeRouter>
<StaticRouter>
使用低阶 <Router> 的最常见用例是同步一个自定义历史记录与一个状态管理库，比如 Redux 或 Mobx。请注意，将 React Router 和状态管理库一起使用并不是必需的，它仅用于深度集成。

二、react-router和react-router-dom区别

相信很多刚学react的朋友都会和我一样，在使用react来创建路由的时候，发现官网上写的是

import *** from 'react-router';

然后百度看了很多博客文章 ，发现是

import *** from 'react-router-dom';

那么这两个关系呢？

• react-router：提供了router的核心api。如Router、Route、Switch等，但没有提供有关dom操作进行路由跳转的api；
• react-router-dom：提供了BrowserRouter、Route、Link等api，可以通过dom操作触发事件控制路由。

那么我们要怎么用呢？
react-router-dom里包含了react-router的依赖，因此我们在安装的时候只需要安装后者即可。

npm install react-router-dom --save

三、Hooks

React Router附带了一些钩子，可让您访问路由器的状态并从组件内部执行导航。
请注意：您必须使用React> = 16.8才能使用这些钩子中的任何一个！

• useHistory
• useLocation
• useParams
• useRouteMatch

useHistory

useHistory钩子使您可以访问可用于导航的history实例。

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

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

useLocation

useLocation钩子返回代表当前URL的location对象。您可以像useState一样考虑它，只要URL更改，它就会返回一个新位置。
这可能非常有用，例如 在您希望每次加载新页面时都使用Web分析工具触发新的"page view"事件的情况下，如以下示例所示：

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  useLocation
} from "react-router-dom";

function usePageViews() {
  let location = useLocation();
  React.useEffect(() => {
    ga.send(["pageview", location.pathname]);
  }, [location]);
}

function App() {
  usePageViews();
  return <Switch>...</Switch>;
}

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  node
);

useParams

useParams返回URL参数的key/value的对象。 使用它来访问当前<Route>的match.params。

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

function BlogPost() {
  let { slug } = useParams();
  return <div>Now showing post {slug}</div>;
}

ReactDOM.render(
  <Router>
    <Switch>
      <Route exact path="/">
        <HomePage />
      </Route>
      <Route path="/blog/:slug">
        <BlogPost />
      </Route>
    </Switch>
  </Router>,
  node
);

useRouteMatch

useRouteMatch钩子尝试以与<Route>相同的方式匹配当前URL。它主要用于在不实际渲染<Route>的情况下访问匹配数据。
不用useRouteMatch：

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

function BlogPost() {
  return (
    <Route
      path="/blog/:slug"
      render={({ match }) => {
        // 用match做你想做的一切...
        return <div />;
      }}
    />
  );
}

使用useRouteMatch：

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

function BlogPost() {
  let match = useRouteMatch("/blog/:slug");

  // 用match做你想做的一切...
  return <div />;
}

 

 

 react-router-dom 中文文档

react-router-dom@5.x官方文档翻译

React Router Dom API 中文 文档

React-Router4.x中文文档

React Router 使用教程 阮一峰

React Router官网

React Router Dom官网