react-router@5 的基本使用

• HashRouter：简单，服务器只认 # 前面的内容，而前端根据 # 后面的内容来显示对应的页面；
• BrowserRouter：需要服务器进行额外配置；
• MemoryRouter：浏览器中的地址栏看不出变化，实际变化了，存在内存中；多用在 native 中；
• 以上三种路由中，99% 的内容相同；

Route 渲染内容的三种方式

<Route
  path="/"
  exact
  children={() => {
    return <Compare />;
  }}
  component={Compare}
  render={() => {
    return <Compare />;
  }}
/>

• 三种渲染方式：children、component、render；
• 这三种方式互斥，同一 Route 只能用一种；
• Route 渲染优先级：children > component > render；
• 能接收到同样的 [route props]，包括 match、location 和 match；

三种方式的不同之处

children

• 如果 Route 没有使用 Switch 包裹，不管 location 是否匹配，都会显示；
• 使用场景：不管 location 能否匹配上，你都需要渲染一些内容；
• 除了总是会显示，其它工作方法与 render 完全一样；

render

• 当使用 render 的时候，调用的只是个函数；
• 只有匹配时，才会显示；

component

• 只有当 location 匹配时才会渲染；
• 如果是匿名函数，就使用 children 和 render，使用 component 会一直卸载、挂载子组件；

Route、Switch、Link、Redirect 的使用

<HashRouter>
  <Link to="/">Home</Link>
  <Link to="/detail">Detail</Link>
  <Link to="/user">User</Link>

  <Switch>
    <Route path="/" exact component={Compare} />
    <Route path="/detail" component={Detail} />
    <Route path="/user" component={User} />
    <Route path="/error" component={ErrorPage} />
    <Redirect from="/*" to="/error" />
  </Switch>
</HashRouter>

动态路由

• 使用 :xxx 的形式定义动态路由；

<HashRouter>
  <Link to="/product/detail">产品说明</Link>
  <Link to="/product/price">产品价格</Link>

  <Switch>
    <Route path="/product/:name" component={DynamicRoute} />
  </Switch>
</HashRouter>

• 在组件中，通过 props 下面的 match.params.xxx 获取；

// [route props]：history、location、match
function DynamicRoute({ match }) {
  const { params } = match;
  return (
    <div>
      <h4>DynamicRoute: {params.name}</h4>
    </div>
  );
}

嵌套路由

• Route 组件嵌套在其它页面组件中，就产生了嵌套路由，修改上面的 DynamicRoute：

function DynamicRoute({ match }) {
  console.log("DynamicRoute: ", match);
  const { url, params } = match;
  return (
    <div>
      <h4>DynamicRoute: {params.name}</h4>
      <Link to={url + "/count"}>销售量</Link>
      <Route path={url + "/count"} component={Count} />
    </div>
  );
}
function Count() {
  return <h4>Count</h4>;
}

• 路由基本使用的所有代码：

import { Component, useState } from "react";
import {
  Link,
  Route,
  HashRouter as Router,
  Switch,
  Redirect,
} from "react-router-dom";

export default function RouteUse() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h4 onClick={() => setCount(count + 1)}>RouteUse-{count}</h4>
      <Router>
        <Link to="/">Home</Link>
        <Link to="/detail">Detail</Link>
        <Link to="/user">User</Link>
        <Link to="/product/detail">产品说明</Link>
        <Link to="/product/price">产品价格</Link>

        <Switch>
          <Route
            path="/"
            exact
            children={() => {
              return <Compare />;
            }}
            component={Compare}
            render={() => {
              return <Compare />;
            }}
          />
          <Route path="/detail" component={Detail} />
          <Route path="/user" component={User} />
          <Route path="/product/:name" component={DynamicRoute} />
          <Route path="/error" component={ErrorPage} />
          <Redirect from="/*" to="/error" />
        </Switch>
      </Router>
    </div>
  );
}

// [route props]：history、location、match
function DynamicRoute({ match }) {
  console.log("DynamicRoute: ", match);
  const { url, params } = match;
  return (
    <div>
      <h4>DynamicRoute: {params.name}</h4>
      <Link to={url + "/count"}>销售量</Link>
      <Route path={url + "/count"} component={Count} />
    </div>
  );
}
function Count() {
  return <h4>Count</h4>;
}

class Compare extends Component {
  componentDidMount() {
    console.log("componentDidMount");
  }
  componentWillUnmount() {
    console.log("componentWillUnmount");
  }
  render() {
    return (
      <div>
        <h4>Compare</h4>
      </div>
    );
  }
}

function Home() {
  return (
    <div>
      <h4>Home</h4>
    </div>
  );
}
function Detail() {
  return (
    <div>
      <h4>Detail</h4>
    </div>
  );
}
function User() {
  return (
    <div>
      <h4>User</h4>
    </div>
  );
}
function ErrorPage() {
  return <h4>404 page</h4>;
}