react-router路由跳转和参数传递

1.路由跳转：

标签:

<Link to="/home" />

hook:

const navigate = useNavigate();
navigate('/home');//前往/home
navigate(-1);//返回上一级

2.默认路由:

<Route index element={<Home />} />

3.携带参数:

params:

// 路由表
<Route path='/home/:id' />
// 标签或者hook
<Link to={`home/${item.id}`} />
navigate(`home/${item.id}`);
// 取出参数
params = useParams();
// 使用params.id

query:

// 标签或者hook
<Link to={{ path: '/home', query: { id: item.id } }} />
navigate(`home`, { query: { id: id } } );
// 取出参数
query = useQuery();
// 使用query.id
const [searchQuery] = useSearchQuery();
// 使用searchQuery.getAll('id');

state: 类似于query，但是会加密

// 标签或者hook
<Link to={{ path: '/home', state: { id: item.id } }} />
navigate(`home`, { state: { id: id } } );
// 取出参数
const { state } = useLocation();
// state.id