React中的路由跳转及传参

在React中，我们通常使用react-router-dom库来实现路由功能。首先，需要安装该库，可以使用npm或yarn进行安装。接下来，我们将介绍如何在React中进行路由跳转和如何传递参数。
路由跳转
在React中，我们可以通过Link组件进行路由跳转。首先，需要在需要跳转的页面导入import { Link } from 'react-router-dom'。然后，在需要跳转的地方使用<Link to={'/目标路由'}>跳转</Link>进行跳转。其中，to属性指定了目标路由的路径。
另外，我们还可以使用history对象进行编程式跳转。首先，需要在需要跳转的组件中导入import { useHistory } from 'react-router-dom'。然后，使用useHistory hook 获取到 history 对象，调用其 push 方法进行跳转。例如：

import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
const handleClick = () => {
history.push('/目标路由');
};
return <button onClick={handleClick}>跳转</button>;
}

传递参数
在React中，我们可以使用路由的state属性来传递参数。例如，我们可以在跳转时给Link组件添加state属性，该属性的值将被添加到目标路由的location.state中。例如：

<Link to={'/目标路由'} state={{ userId: 123 }}>跳转</Link>

在目标组件中，我们可以使用this.props.location.state.userId来获取传递的参数。例如：

function MyComponent({ location }) {
const userId = location.state.userId;
// ...
}

另外，我们还可以使用路由的params属性来传递参数。例如，我们可以在目标路由的路径中使用:id来表示参数，然后在目标组件中通过this.props.match.params.id来获取传递的参数。例如：

<Link to={'/目标路由/123'}>跳转</Link>

在目标组件中：

function MyComponent({ match }) {
const userId = match.params.id;
// ...
}

需要注意的是，在使用编程式跳转时，我们需要手动将参数添加到目标路径中。例如：

history.push({ pathname: '/目标路由', state: { userId: 123 } });