React通过路由传递参数小节

React可以使用React Router库来实现路由传参.React Router提供了多种方式来传递参数,其中两种常见的方式是通过URL参数和通过路由状态(Route State)。

1.通过URL参数传递参数(params传递参数):

你可以在URL中添加参数,然后在组件中通过props.match.params来获取这些参数。例如:

  Step 1:定义路由:
import { BrowserRouter as Router, Route } from 'react-router-dom';
import YourComponent from './YourComponent';

function App() {
  return (
    <Router>
      <Route path="/your-route/:paramName" component={YourComponent} />
    </Router>
  );
}
Step 2:在组件中获取参数:
import React from 'react';

class YourComponent extends React.Component {
  render() {
    // 通过 this.props.match.params 获取参数
    const paramName = this.props.match.params.paramName;

    return (
      <div>
        <p>参数值: {paramName}</p>
      </div>
    );
  }
}

export default YourComponent;
  具体代码实现:
//A组件
import { useHistory } from 'react-router-dom';

function AComponents() {
    const history = useHistory();
    
    history.push(`/path/id=${your_id}`);//path为B组件路径
}


//B组件
import { useHistory } from 'react-router-dom';

function BComponents() {
    const params = useParams()
    console.log('params:',params)
}

2.通过路由状态传递参数:

使用withRouter高阶组件来将路由信息传递给组件,并通过this.props.history来操作路由状态.

  Step 1:定义路由:
import { BrowserRouter as Router, Route } from 'react-router-dom';
import YourComponent from './YourComponent';

function App() {
  return (
    <Router>
      <Route path="/your-route" component={YourComponent} />
    </Router>
  );
}
Step 2:在组件中使用 withRouter:
import React from 'react';
import { withRouter } from 'react-router-dom';

class YourComponent extends React.Component {
  handleButtonClick = () => {
    // 通过 this.props.history.push 设置路由状态
    this.props.history.push('/your-route', { paramName: 'yourParamValue' });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleButtonClick}>设置参数</button>
      </div>
    );
  }
}

// 使用 withRouter 包装组件,以便获取路由信息
export default withRouter(YourComponent);


3.最后简单回顾下React Router库配置和主要组件

配置

在项目中(一般是src/package.json)第三方库管理文件中,添加"react-router-dom": "^5.2.0"

{
  "name": "your_project_name",
  "version": "1.0.0",
  "description": "your_project_description",
  "author": "dev",
  "scripts": {
    ...
  },
  "dependencies": {
    ...
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    ...
  },
  "browserslist": {
    ...
  }
}
React Router 的主要组件分别有:

a) BrowserRouter:使用 HTML5 History API(pushState, replaceState 和 popstate 事件)来保持 UI 和 URL 的同步,是 React Router 的根组件之一。

b) Route: 用于在应用中定义路由和相应的组件。它接受 path 属性来匹配 URL,然后渲染相应的组件。

c) Switch: 在一组 <Route> 中选择第一个匹配的路由进行渲染。这样可以确保只有一个路由被渲染。

d) Link: 用于创建导航链接,点击链接时会更新 URL,从而触发相应的路由。

e) Redirect: 用于在匹配条件满足时重定向用户到另一个地址。

f) ** withRouter:** 一个高阶组件,用于将路由信息注入到组件的 props 中,使组件能够访问路由相关信息(如 history, location, match)。

  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值