React 路由与组件通信：如何实现路由参数、查询参数、state和上下文的使用

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

在React中，路由与组件通信通常是通过以下几种方式实现的：

1. 通过路由参数（Params）

当使用React Router（一个常用的React路由库）时，你可以在路由定义中传递参数，然后在组件中通过props来访问这些参数。

// 定义路由，其中:id是路由参数
<Route path="/user/:id" component={UserComponent}/>
// 在UserComponent组件中访问参数
const UserComponent = ({ match }) => {
  const { id } = match.params;
  return <div>User ID: {id}</div>;
};

2. 通过查询参数（Query）

查询参数可以通过location.search属性访问，但你可能需要解析这个字符串来获取实际的参数值。

// 在路由中不需要特别定义查询参数
<Route path="/search" component={SearchComponent}/>
// 在SearchComponent组件中解析查询参数
import { useLocation } from 'react-router-dom';
const SearchComponent = () => {
  const location = useLocation();
  const query = new URLSearchParams(location.search);
  const searchTerm = query.get('query');
  return <div>Search Term: {searchTerm}</div>;
};

3. 通过state

你可以在导航到一个路由时传递额外的state，然后在目标组件中通过location.state来访问这个state。

// 使用Link或useHistory钩子进行导航，并传递state
<Link to={{ pathname: "/user", state: { fromDashboard: true } }}>User</Link>
// 在UserComponent组件中访问state
const UserComponent = ({ location }) => {
  const { fromDashboard } = location.state || {};
  return <div>From Dashboard: {fromDashboard ? 'Yes' : 'No'}</div>;
};

4. 使用上下文（Context）

React的上下文API允许你跨组件传递数据，而无需一层层地手动传递props。

// 创建一个上下文
const UserContext = React.createContext();
// 在路由组件中使用Provider包裹子组件，并传递值
<Route path="/user" render={() => (
  <UserContext.Provider value={{ userId: '123' }}>
    <UserComponent/>
  </UserContext.Provider>
)}/>
// 在UserComponent组件中消费上下文
const UserComponent = () => {
  const { userId } = useContext(UserContext);
  return <div>User ID: {userId}</div>;
};

5. 使用Redux或MobX等状态管理库

如果你在应用中使用了状态管理库，你可以将路由信息或组件数据存储在全局状态中，然后在任何组件中访问。

// 在路由变化时更新Redux状态
const mapStateToProps = state => ({
  userId: state.routing.userId
});
const UserComponent = ({ userId }) => {
  return <div>User ID: {userId}</div>;
};
export default connect(mapStateToProps)(UserComponent);

这些方法可以根据应用的具体需求和结构灵活选择。React Router提供的useParams、useLocation、useHistory等钩子，以及React的上下文API，为组件与路由之间的通信提供了便利。