react-router@5 的基本使用

• HashRouter：簡單，服務(wù)器只認 # 前面的內(nèi)容，而前端根據(jù) # 后面的內(nèi)容來顯示對應(yīng)的頁面；
• BrowserRouter：需要服務(wù)器進行額外配置；
• MemoryRouter：瀏覽器中的地址欄看不出變化，實際變化了，存在內(nèi)存中；多用在 native 中；
• 以上三種路由中，99% 的內(nèi)容相同；

Route 渲染內(nèi)容的三種方式

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

• 三種渲染方式：children、component、render；
• 這三種方式互斥，同一 Route 只能用一種；
• Route 渲染優(yōu)先級：children > component > render；
• 能接收到同樣的 [route props]，包括 match、location 和 match；

三種方式的不同之處

children

• 如果 Route 沒有使用 Switch 包裹，不管 location 是否匹配，都會顯示；
• 使用場景：不管 location 能否匹配上，你都需要渲染一些內(nèi)容；
• 除了總是會顯示，其它工作方法與 render 完全一樣；

render

• 當(dāng)使用 render 的時候，調(diào)用的只是個函數(shù)；
• 只有匹配時，才會顯示；

component

• 只有當(dāng) location 匹配時才會渲染；
• 如果是匿名函數(shù)，就使用 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>

動態(tài)路由

• 使用 :xxx 的形式定義動態(tài)路由；

<HashRouter>
  <Link to="/product/detail">產(chǎn)品說明</Link>
  <Link to="/product/price">產(chǎn)品價格</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 組件嵌套在其它頁面組件中，就產(chǎn)生了嵌套路由，修改上面的 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">產(chǎn)品說明</Link>
        <Link to="/product/price">產(chǎn)品價格</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>;
}