react路由跳转及传参的方法是什么

在React中，可以使用React Router来进行路由跳转和传参。以下是使用React Router进行路由跳转和传参的方法：

1. 安装React Router：首先，需要安装React Router库。可以使用以下命令来安装React Router：

npm install react-router-dom

1. 设置路由：在应用的根组件中，设置路由。可以使用BrowserRouter或HashRouter组件来包裹整个应用，并使用Route组件来定义路由。

import {
 BrowserRouter as Router, Route }
     from 'react-router-dom';


function App() {
    
  return (
    Router>

      Route path="/" exact component={
Home}
     />

      Route path="/about" component={
About}
     />
    
    /Router>
    
  );

}

1. 跳转路由：可以使用Link组件或history.push方法来进行路由跳转。

• 使用Link组件：

import {
 Link }
     from 'react-router-dom';


function Navigation() {
    
  return (
    nav>
    
      Link to="/">
    Home/Link>
    
      Link to="/about">
    About/Link>
    
    /nav>
    
  );

}

• 使用history.push方法：

import {
 useHistory }
     from 'react-router-dom';


function Home() {
    
  const history = useHistory();
    

  const handleClick = () =>
 {
    
    history.push('/about');

  }
    ;
    

  return (
    div>

      button onClick={
handleClick}
    >
    Go to About/button>
    
    /div>
    
  );

}

1. 传递参数：可以通过路由路径中的参数或使用Route组件的render属性来传递参数。

• 路由路径中的参数：

Route path="/user/:id" component={
User}
     />

在User组件中，可以通过props.match.params.id来获取传递的参数。

• 使用render属性：

Route path="/user" render={
    (props) =>
 User {
...props}
 userId={
123}
     />
}
     />
    

在User组件中，可以通过props.userId来获取传递的参数。

这些是使用React Router进行路由跳转和传参的基本方法。根据具体的需求，还可以使用更高级的功能，如嵌套路由、路由守卫等。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！