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）。