react-router-dom v5

22 阅读1分钟

动态路由传参

<Route path="/user/:userId" component={UserProfile} />

usehistory: 路由跳转

const history = useHistory();
history.push(`/user/1`);  // 动态传参
history.push('/detail?id=10&name=zhansan');  // query传参

useParams: 获取动态参数

const { userId } = useParams();

useLocation: 获取query参数(需配合URLSearchParams)

const location = useLocation();
const params = new URLSearchParams(location.search);
const id = params.get('id');