React 生态应用 - React Router（2）

目录

RouteProps

Route参数

重定向Redirect【v5】&& 【v6实现】

导航的处理

练习

使用随堂demo实现一个简单的鉴权：当前用户是admin的时候，可以访问所有菜单；当前用户是user的时候，无法访问admin页面（用户可以模拟后端在页面输入）。

---

RouteProps

//v5版本语法 

  } />            

Route参数

// v5语法传参,加上?代表可选参数

v5语法传参接收

render() {
    return (
        

        	
Product - {this.props.match.params.id}
        
    
    )
}

v6.0.1语法传参接收

import React from 'react';
import { useParams } from 'react-router-dom';
// useParams 必须在React函数组件或自定义React Hooks函数中调用React Hooks
const Posts = () => {
  const params = useParams();
  return (
    

      
Posts
      Year: {params.year}, Month:{params.month}
    
  );
};
export default Posts;

推荐使用query-string 解析路径参数url?s=1&d=2

npm install query-string --save
improt queryString from 'query-string'
const parsed = queryString.parse(location.search)

重定向Redirect【v5】&& 【v6实现】

// v5 写法

// v6写法
} />
} />
} />

导航的处理

// v5
history.push('/products')
history.replace('/products')
// v6
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
function handleSave() {
    // Navigate to /products
    navigate('/products');
    navigate('/products',{replace:true});
}

 

练习

使用随堂demo实现一个简单的鉴权：当前用户是admin的时候，可以访问所有菜单；当前用户是user的时候，无法访问admin页面（用户可以模拟后端在页面输入）。