React Router

react-router 安装

安装 react-router 用于web app，命令:

yarn add react-router-dom

安装 react-router 用于 ios/Android app, 命令：

yarn add react-router-native

code 举例，AppRouter.js :

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import ExpenseDashboardPage from "../components/ExpenseDashboardPage";
import AddExpensePage from "../components/AddExpensePage";
import EditExpensePage from "../components/EditExpensePage";
import HelpPage from "../components/HelpPage";
import NotFoundPage from "../components/NotFoundPage";
import Header from "../components/Header";

const AppRouter = () => (
  <BrowserRouter>
    <div>
      <Header />
      <Switch>
        <Route path="/" component={ExpenseDashboardPage} exact={true} />
        <Route path="/create" component={AddExpensePage} />
        <Route path="/edit/:id" component={EditExpensePage} />
        <Route path="/help" component={HelpPage} />
        <Route component={NotFoundPage} />
      </Switch>
    </div>
  </BrowserRouter>
);

export default AppRouter;

exact 属性

默认情况下， /create 同时匹配 / 和 /create，Route 添加 exact 属性实现精确匹配，exact 默认值为false。

exact = { true }

client side routing

The first time we visit our application, the browser needs to grab the initial HTML and load the JavaScript before it can do anything, before the react router code even runs.
浏览器试图从服务器获取 localhost:8080/create，而服务器回应404：
GET http://localhost:8080/create 404 （Not Found)
Cannot GET /create
It’s not actually using client side routing. It was using server side routing for that first page load.
使用client side routing 避免客户端与服务器通信。
通过设置 historyApiFallback 为true 告诉dev Server，将通过客户端代码处理路由。let dev server to always serve up the index html file for all unknown 404：

devServer: {
    static: {
      directory: path.join(__dirname, "public"),
    },
    historyApiFallback: true,
  },
};

BrowserRouter

BrowserRouter 希望传入的child数目要么为0， 要么为1， 因此，使用 div tag.

Switch：

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

由于下面的404 Route 没有加路径，实际上匹配所有的路径。

 <Route component={NotFoundPage} />

因此加Switch，类似于c语言中的关键字，如果url已经匹配其他路径，将break，不会再次匹配到最后的 404.

Linking Between Routes

使用 Link，可以阻止站内 full page refresh，JavaScript 实时交换内容。站外的网站则无此必要。NavLink 在 Link的基础上增加了其他的特性。NavLink在设计网页的Header时特别有用。

import React from "react";
import {Link} from "react-router-dom";
const NotFoundPage = () => (
  <div>
    404! <Link to="/">Go Home</Link>
  </div>
);
export default NotFoundPage;

import React from "react";
import {NavLink} from "react-router-dom";
const Header = () => (
  <header>
    <h1>Expensify</h1>
    <NavLink to="/" activeClassName="is-active" exact={true}>
      Dashboard
    </NavLink>
    <NavLink to="/help" activeClassName="is-active">
      Help
    </NavLink>
  </header>
);
export default Header;

react route 能够传递 props 给组件。

在url中加入参数：

<Route path="/edit/:id" component={EditExpensePage}>

id是参数，可以实现 url 动态匹配。
hash value：

localhost://8080#contact-us

This would scroll us down to the element on the page that had an id of contact-us and that’s very useful for long pages.