ReactRouter-参数传递与获取参数

参数传递与获取参数

1. 动态路由传参 *

• 前提配置路由，留好占位

// 1.配置占位
<HashRouter>
  <Switch>
     <Route path="/xxx/:id"></Route> //留好占位
  </Switch>
</HashRouter>

// 2.参数传递
import useHistory from 'react-router-dom'
const historty = useHistory()
let id = 6666;
history.push(`/xxx/${id}`);

// 3.接收参数
let param = props.match.param.id;
console.log(param)

2. query传参

• 路径中不显示参数

// 1.参数传递
import useHistory from 'react-router-dom'
const historty = useHistory()

history.push({ pathname: '/xxxx', query: { id: 666} });

// 2.接收参数
console.log(props.location.query.id)

3.state传参

// 1.参数传递
import useHistory from 'react-router-dom'
const historty = useHistory()

history.push({ pathname: '/xxxx', state: { id: 666} });

// 2.接收参数
console.log(props.location.state.id)