路由分类

服务端路由

服务端路由，请求发送到服务端，服务端返回对应的页面内容

服务端路由是多页面应用，我们通过向服务端请求不同的路径，服务端返回我们不同的页面

客户端路由

请求不发送到服务端，由客户端更新页面

客户端路由是单页面应用，我们通过js来动态控制页面展示的内容，对于数据来说，通过ajax的方式异步从服务端获取。

React Router

React Router就是客户端路由的解决方案，用来管理客户端的页面路由

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

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

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

这就是React Router的一个简单示例

Router

BrowserRouter：根据URL中的path 做路由跳转

HashRouter：根据URL中的hash部分做路由跳转

BrowserRouter在地址栏中的显示就和普通的多页面应用是一样的

HashRouter在地址栏中的显示会有一个#号

HashRouter主要面向的是一些老的浏览器，BrowserRouter需要一个特殊的API支持。

但是目前还是使用BrowserRouter更多，因为更符合人们的习惯，而且一般用到React Router的场景，应该都已经支持了BrowserRouter.

Route

Route这个组件描述了路由规则

当url和 Route中定义的path匹配时，渲染对应的组件

exact表示精确匹配

在下面的例子中如果"/"不加exact的话，所有都会匹配到这个路由上

<Switch>
    <Route exact path="/">
    	<Home />
    </Route>
    <Route path="/editor">
    	<Editor />
    </Route>
    <Route path="/login">
    	<Login />
    </Route>
    <Route path="/posts/:id">
    	<Post />
    </Route>
</Switch>

路由跳转

声明式组件方式:Link

命令式的API调用方式：history.phsh

使用Link进行跳转就如前面的例子中看到的，首先从 react-router-dom 中引入Link组件，然后

使用<Link to="/">Home</Link>，用户点击后就可以跳转了。

想要使用命令式调用，就需要用到Hook。

Hook

Hook提供了API可以进行路由的控制

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>
  );
}

useParams:获取路由中的参数

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
);

更多关于React Router的说明可以查看React Router: Declarative Routing for React.js

【青训营】-React2-路由