react-router-dom V5版本详解

import './App.css';
import React, { lazy, Suspense } from 'react'
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
import { useHistory } from 'react-router-dom';
let Count = lazy(() => import("./pages/count/index.js"));
let ShowCount = lazy(() => import("./pages/ShowCount/index.js"));
let DynamicRoute = lazy(() => import("./pages/DynamicRoute/index"));
let StateRoute = lazy(() => import("./pages/StateRoute/index"));
let InterceptionRoute = lazy(() => import("./pages/InterceptionRoute/index"));

const Loading = () => {
  return <div>加载中</div>
};
function App() {
  const history = useHistory();
  // query传参
  const goPathCount = () => {
    /*
    query传参
    优势：传参不会显示在url中;
    缺点：刷新地址栏，参数丢失;
    */
    history.push({ pathname: "/count", query: { name: 'query传参' } });
  }

  // search传参
  const goPathShowCount = () => {
    /*
      search传参
     如下两种写法都是search传参
     优点
     刷新也不会消失，如果失去登陆态导致重新登陆，地址栏和search并不会丢失
     缺点：
     传参会显示在地址栏中,并且传递一些汉字的时候需要使用encodeURI和decodeURI配合使用否则刷新后会丢失
     传参会显示在地址栏中,传递字符串且传值太多的话，url会又长又不美观
    */
    const searchData = encodeURI('我是search传参的参数');
    // search传参
    // 如下两种写法都是search传参
    // history.push(`/showCount?${searchData}`);
    history.push({ pathname: "/showCount", search: searchData });
  };

  // params传参→ 动态路由传参
  const goDynamicRoute = () => {
    /*
    params传参→ 动态路由传参
    优点:
    这种方式参数数据会显示在地址栏中，刷新也不会消失
    缺点:
    params 传参方式可以传递一个或者多个值(值的类型都是字符串)，
    没法传递一个对象；
    如果需要传递一个对象的话，可以将 json 对象转换为字符串，传递获取后再将 json 字符串转换为对象将数据取出来
    获取传参值的方式
    import { useParams } from 'react-router-dom';
    const routeParams = useParams();
    console.log('routeParams', routeParams);
    */
    history.push('/dynamicRoute/123');
  }

  // state传参
  const goStateRoute = () => {
    /*
    state传参
    优点：
    这种方式参数数据不会显示在地址栏中，刷新也不会消失
    缺点：
    如果失去登陆态导致重新登陆，state直接成为undefined
    */
    history.push({ pathname: "/stateRoute", state: { stateData: 'state传参' } });
  }
  return (
    <div className="App">
      {/* <Count name='张山峰' />
      <br />
      <ShowCount /> */}
      <button onClick={goPathCount}>path='/count'_query传参</button>
      <button onClick={goPathShowCount}>/showCount_search传参</button>
      <button onClick={goDynamicRoute}>/dynamicRoute/:id'_动态路由传参</button>
      <button onClick={goStateRoute}>/stateRoute'_state传参</button>
      {/* 
      Suspense配合 lazy可以使得路由懒加载 
      fallback内部的组件是懒加载还没加载成功的时候显示的组件
      */}
      <Suspense fallback={<Loading></Loading>}>
        {/* 
        Switch的作用
        如果不使用Switch组件,如果我们如果路由如下↓写法,当我们点击跳转到/showCount路由地址的时候,则会同时展示组件A,组件B,组件C三个组件,也就是说我们不使用Switch组件的时候,当路由匹配成功后仍然回向下继续匹配,这样非常消耗性能;所以我们要优化路由的话就需要使用Switch组件包裹，使用Switch包裹后，只要路由匹配成功后就不会在继续向下匹配了。
        <Route path='/showCount' component={组件A} />
        <Route path='/showCount' component={组件B} />
        <Route path='/showCount' component={组件C} />
      */}
        <Switch>
          <Route path='/count' component={Count} />
          <Route path='/showCount' component={ShowCount} />
          {/* ↓是动态路由传参组件 */}
          <Route path='/dynamicRoute/:id' component={DynamicRoute} />
          {/* State传参StateRoute */}
          <Route path='/stateRoute' component={StateRoute} />
          {/* 路由拦截 Route interception*/}
          <Route path='/interceptionRoute' render={() => {
            const token = 1;
            // token这里请求token判断是否过期
            return token ? <InterceptionRoute /> : <div>这个是登录组件</div>
          }} />
          {
            /* 
            Redirect组件是兜底的作用,
            路由匹配会从上往下匹配,如果都没有匹配成功我们就需要去做一个兜底匹配到一个默认的路由组件 
            当前面所有路由都匹配不上了,那么我们就默认去to的路由
            */
          }
          <Redirect to='/count' />
        </Switch>
      </Suspense>
    </div>
  );
}

export default App;