如何将 id 传递给单独文件反应的路由 - JavaScript

当我们需要将数据传递给不同的页面或组件时，例如将一个 id 传递给单独文件反应的路由，可以使用以下几种方式实现：

1. URL 参数传递

我们可以将 id 作为 URL 的参数传递给目标路由，例如：

<Route path="/article/:id" component={Article} />

在这个例子中，:id 表示路由参数，我们可以在组件内通过 this.props.match.params.id 获取传递的 id 值。

2. Query 参数传递

还可以通过 Query 参数传递 id 值，例如：

<Link to={{ pathname: '/article', search: `?id=${id}` }}>
  View Article
</Link>

在目标组件中，我们可以通过 this.props.location.search 获取到传递的 Query 参数。但是这个值是一个字符串，需要手动解析参数值。

3. Store 状态管理传递

我们也可以使用状态管理工具（如 Redux 或 MobX）将 id 传递给不同页面或组件，例如：

// action.js
export const setArticleId = (id) => ({
  type: 'SET_ARTICLE_ID',
  id,
});

// reducer.js
const initialState = {
  articleId: null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_ARTICLE_ID':
      return {
        ...state,
        articleId: action.id,
      };
    default:
      return state;
  }
};

// Article.js
import { connect } from 'react-redux';
import { setArticleId } from './action';

class Article extends React.Component {
  componentDidMount() {
    const { id } = this.props.match.params;
    this.props.setArticleId(id);
  }

  render() {
    const { articleId } = this.props;
    // ...
  }
}

const mapStateToProps = (state) => ({
  articleId: state.articleId,
});

const mapDispatchToProps = {
  setArticleId,
};

export default connect(mapStateToProps, mapDispatchToProps)(Article);

在这个例子中，我们在 Article 组件 componentDidMount 生命周期中获取 URL 参数传递的 id 值，并将其通过调用 setArticleId action 存储到 Redux store 中。在需要获取这个值的任何位置，我们可以通过 mapStateToProps 访问 articleId 值。

无论您选择哪种方式传递 id 值，都可以通过在路由或状态管理中使用它来实现更灵活的页面或组件。