react-router

react-router@5 的基本使用

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

Route 渲染内容的三种方式

 {
    return ;
  }}
  component={Compare}
  render={() => {
    return ;
  }}
/>

• 三种渲染方式：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 的使用

  Home
  Detail
  User

  
    
    
    
    
    
  

动态路由

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

  产品说明
  产品价格

  
    
  

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

// [route props]：history、location、match
function DynamicRoute({ match }) {
  const { params } = match;
  return (
    

      
DynamicRoute: {params.name}
    
  );
}

嵌套路由

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

function DynamicRoute({ match }) {
  console.log("DynamicRoute: ", match);
  const { url, params } = match;
  return (
    

      
DynamicRoute: {params.name}
      销售量
      
    
  );
}
function Count() {
  return 
Count
;
}

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

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 (
    

      
 setCount(count + 1)}>RouteUse-{count}
      
        Home
        Detail
        User
        产品说明
        产品价格

        
           {
              return ;
            }}
            component={Compare}
            render={() => {
              return ;
            }}
          />
          
          
          
          
          
        
      
    
  );
}

// [route props]：history、location、match
function DynamicRoute({ match }) {
  console.log("DynamicRoute: ", match);
  const { url, params } = match;
  return (
    

      
DynamicRoute: {params.name}
      销售量
      
    
  );
}
function Count() {
  return 
Count
;
}

class Compare extends Component {
  componentDidMount() {
    console.log("componentDidMount");
  }
  componentWillUnmount() {
    console.log("componentWillUnmount");
  }
  render() {
    return (
      

        
Compare
      
    );
  }
}

function Home() {
  return (
    

      
Home
    
  );
}
function Detail() {
  return (
    

      
Detail
    
  );
}
function User() {
  return (
    

      
User
    
  );
}
function ErrorPage() {
  return 
404 page
;
}